Loop through JSON objects and output in HTML element


#1

I am trying to loop through JSON object values and I would like to output title and body in HTML elements but I’m having problems, please help? item.title is showing undefinedundefinedundefinedundefinedundefinedundefined…

function getPosts() {
        debugger
        const url = 'https://jsonplaceholder.typicode.com/posts';
        fetch(url)
        .then(data=>{return data.json()})
        .then(res=>{
          console.log(res['title']);
          for (item in res) {
              document.getElementById("demo").innerHTML += item.title;
          }
        })
      }

#3

yes it is returning JSON


#4

Why not do this. I think you should read the docs of Vue.
You’re manipulating the dom directly which is a bad idea, these are the reasons I can think of. Probably there are more. Maybe someone else can extend this list :slight_smile:

  • Your data is coupled to your html element ID. When you want to show your data somewhere else you would have to change your ids.
  • Vue keeps track of changes in the virtual dom. If you add things to the dom yourself like you did with innerHTML these things aren’t inside the virtual dom of Vue. So when Vue re-renders the actual DOM your added changes are gone.

Nevertheless I made a demo of how it can work. Take a look at these things in the docs (Component basics, Working with lists)

https://jsfiddle.net/lexlemmens/eywraw8t/490650/