Задание "Convert JSON Data to HTML".

Меню

, чтобы сохранить свой прогресс

Преобразование данных JSON в HTML

Теперь, когда вы получаете данные из JSON API, вы можете отобразить его в HTML. Вы можете использовать метод forEach для циклического прохождения данных, поскольку объекты фотографии cat хранятся в массиве. По мере перехода к каждому элементу вы можете изменить элементы HTML. Сначала объявите html-переменную с var html = ""; , Затем прокрутите JSON, добавив HTML к переменной, которая обертывает имена ключей в strong тегах, а затем значение. Когда цикл закончен, вы его визуализируете. Вот код, который делает это:

json.forEach (function (val) {
var keys = Object.keys (val);
html + = "<div class = 'cat'>";
keys.forEach (функция (ключ) {
html + = "<strong>" + ключ + "</ strong>:" + val [key] + "<br>";
});
html + = "</ div> <br>";
});

Add a forEach method to loop over the JSON data and create the HTML elements to display it.

Here is some example JSON

[
  {
    "id":0,
      "imageLink":"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg",
      "altText":"A white cat wearing a green helmet shaped melon on its head. ",
      "codeNames":[ "Juggernaut", "Mrs. Wallace", "Buttercup"
    ]
  }
]

⌛

Your code should store the data in the html variable

⌛

Your code should use a forEach method to loop over the JSON data from the API.

⌛

Your code should wrap the key names in strong tags.

/** * Your test output will go here. */