Vfrdtyky

I have a fetch api as such:

let url ='https://jsonplaceholder.typicode.com/posts/20'

const html = document.getElementById('root');





fetch(url)

.then(response => response.json())

.then(json => writeToHTML(json))  //vi bruger JSON.stringify(json for at konvertere til en streng)

.catch(error =>console.log("The error is: ", error));







const writeToHTML = (json) =>{

    let html = "";

    console.log(JSON.stringify(json))

    for(jsonObj in json){

    let jsonString = JSON.stringify(jsonObj);

    html += `<p><b> ${jsonString} </b> </p>`

    }

    document.getElementById('root').innerHTML = html

}

but the output is not working properly, it is only placing the keys, of the json object, where i want each value pair, being displayed on a new line each time.

here is the full json object, I'm fetching, i would prefer to do it with more objects.

{"userId":2,"id":20,"title":"doloribus ad provident suscipit at","body":"qui consequuntur ducimus possimus quisquam amet similiquensuscipit porro ipsam ametneos veritatis officiis exercitationem vel fugit aut necessitatibus totamnomnis rerum consequatur expedita quidem cumque explicabo"}

What you are calling jsonobj in for(jsonObj in json) is not an object it is each property name in the object you call json

Try

for(let key in json){     

    html += `<p><b>${key} :  ${json[key]} </b> </p>`

}

A for loop over an object i.e for(let jsonObj in json){ jsonObj is the key not the full object.

So I think your looking for something like:

for(let jsonObj in json){

  let jsonString = JSON.stringify(json[jsonObj]);

  html += `<p><b> ${jsonString} </b> </p>`

}