Проход по JSON и вставка в HTML не работает должным образом - PullRequest
Новая
       15

Проход по JSON и вставка в HTML не работает должным образом

0 голосов
/ 12 ноября 2018

У меня есть api fetch как таковой: 

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
}

но вывод не работает должным образом, он только размещает ключи объекта json, где я хочу, чтобы каждая пара значений отображалась в новой строке каждый раз.

вот полный объект json, я выбираю, я бы предпочел сделать это с большим количеством объектов. 

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

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

То, что вы называете jsonobj в for(jsonObj in json), не является объектом, это имя каждого свойства объекта, который вы называете json

Попробуйте 

for(let key in json){     
    html += `<p><b>${key} :  ${json[key]} </b> </p>`
}
0 голосов
/ 12 ноября 2018

A for цикл над объектом, т. Е. for(let jsonObj in json){ jsonObj - это ключ, а не полный объект.

Так что я думаю, что вы ищете что-то вроде: 

for(let jsonObj in json){
  let jsonString = JSON.stringify(json[jsonObj]);
  html += `<p><b> ${jsonString} </b> </p>`
}
...