0
0 Comments

I have a JSON file that’s storing some data as an array of objects:

{
  "projects": [
    {
        "title": "title0",
      "content": "content0"
    },
    {
      "title": "title1",
      "content": "content1"
    },
    {
      "title": "title2",
      "content": "content2"
    }
  ]
}

I’m using JQuery to try and put these into a list, one after another:

.getJSON("projects.json", function( data ) {     console.log(typeof jsondataect);     var features = document.getElementById('featuredProjects');     var ul = document.createElement('ul');     for (var i = 0; i < data.length; ++i) {       var li = document.createElement('li');('li').html(data[i].content);
      ul.appendChild(li);                                 
    }
    features.appendChild(ul);  
});

But this produces an empty HTML list in my document. I want the HTML to list the elements of the JSON array like this:

<div>
    <ul>
        <li>title0</li>
        <li>content0</li>
        <li>title1</li>
        <li>content1</li>
        <li>title2</li>
        <li>content2</li>
    </ul>
</div>

What am I doing wrong?

Anonymous Asked question May 14, 2021