Using JQuery to put a JSON array into a HTML list

Question

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?

Replacing "data.length" with "data.projects.length" in the for loop should fix the issue. And, you need to have a HTML element with id name "featuredProjects" since you are getting the element by id not create an new element. — StevenXXCCC
– StevenXXCCC, Commented May 14, 2021 at 18:12

Kinglish · Accepted Answer · 2021-05-14 18:25:39Z

Your main issue is that you're trying to loop through data which is just one thing - an object called projects. You need to loop through data.projects, including using data.projects.length in your for(). Also, you've done most everything in regular javascript, except the one line $('li')... That is jQuery, so I changed it for regular JS. But it wouldn't have worked anyways since the line

$('li').html(data[i].content);

Is saying 'Find every <li> element on the page and change it's inner text to be data[i].content. I changed that to just use the li reference you made the line before, and used innerHTML instead of $(id).html()

Finally, I see after all this that in your title, you want to do this in jQuery. So I added a second loop to show how to do that.

window.onload = () => {
  var data = {
    "projects": [{
        "title": "title0",
        "content": "content0"
      },
      {
        "title": "title1",
        "content": "content1"
      },
      {
        "title": "title2",
        "content": "content2"
      }
    ]
  }



  var features = document.getElementById('featuredProjects');
  var ul = document.createElement('ul');
  for (var i = 0; i < data.projects.length; ++i) {
    var li = document.createElement('li');
    ul.appendChild(li);
    li.innerHTML = data.projects[i].title;

    li = document.createElement('li');
    ul.appendChild(li);
    li.innerHTML = data.projects[i].content;


  }
  features.appendChild(ul);
  
  
  // here's the jQuery way
  // Also showing a different way that you can loop through an array 
  let new_ul=[];
  data.projects.forEach( obj => {
   new_ul.push("<li>"+obj.title+"</li>");
   new_ul.push("<li>"+obj.content+"</li>")
  })
  // join all the li's 
   $('#featuredProjectsJQ').html("<ul>" + new_ul.join("") + "</ul>")
   

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body><h3>Regular JS</h3>
  <div id='featuredProjects'></div>
  
  <h3>jQuery JS</h3>
  <div id='featuredProjectsJQ'></div>
</body>

</html>

Collectives™ on Stack Overflow

Using JQuery to put a JSON array into a HTML list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related