How can I display list of items from a text file?

Question

I am creating a website that scrapes data from different websites and display them on my website by rendering the text file data.

I know how to do it in React (see my code below), but I want to do it in HTML using simple javascript. Please suggest me what I should do?

renderComments({comments}){
    if(comments != null){
        const commentList=comments.map((comment)=>{
            return(
                <li key={comment.id}>
                   <p> {comment.detail}</p>
                   <p>--{comment.author}</p>
                </li>
            );
        });

        return(
            <div className="col-12 col-md-5 m-1">
                <h4>Comments</h4>
                <ul className='list-unstyled'>
                    {commentList}
                </ul>
            </div>
        );
    }
}

it depends on what kind of text file you have, can you share the content and the file extension — Mateus Martins, Jul 15 '19 at 11:05
Do you want to read data from a file or you want to know how to add that data in html using javascript? — Monika Mangal, Jul 15 '19 at 11:07
The file would be a .txt file containing the data scraped from websites using Python.(File will contain data in form of array or list). Then I want to display the contents from that file. — Ankur Palmia, Jul 16 '19 at 13:40

score 0 · Answer 1 · answered Jul 15 '19 at 11:02

You can use document.createElement(tagName[, options]);

for (var i = 0; i < comments.length; i++) {
    var comments = comments[i];
    var ul = document.getElementsByClassName("list-unstyled")[0];
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(comments));
    ul.appendChild(li);
}

<ul className='list-unstyled'></ul>

Also you can use appendChild

for (var i = 0; i < comments.length; i++) {
    var comments = comments[i];
    var li = document.createElement('li');
    li.innerHTML = comments;  
    document.getElementsByClassName("list-unstyled")[0].appendChild(li);
}

GalAbra · Answer 2 · 2019-07-15T11:17:36.907

Here is the Vanilla JS equivalent, except the content of the child elements, which I left for you to finish using the same methods I've used:

function renderComments(comments) {
  if (comments != null) {
    let ans = document.createElement('div');
    ans.classList.add('col-12', 'col-md-5', 'm-1');

    let h4Node = document.createElement('h4');
    h4Node.innerText = 'Comments';
    ans.appendChild(h4Node);

    let ulNode = document.createElement('ul');
    ulNode.classList.add('list-unstyled');

    for (let i = 0; i < comments.length; i++) {
      let comment = comments[i];

      let currNode = document.createElement('li');
      currNode.setAttribute('key', comment.id);

      // Here add the additional two <p> elements

      ulNode.appendChild(currNode);
    }

    ans.appendChild(ulNode);
    return ans;
  }
}

let example = [{id: 1}, {id: 2}];

document.body.appendChild(renderComments(example));

The core of this are createElement and appendChild, which creates an HTML node and adds an element as a child, respectively.

How can I display list of items from a text file?

2 Answers2