Разобрать файл сервера JSON в список HTML - PullRequest
Новая
       2

Разобрать файл сервера JSON в список HTML

0 голосов
/ 25 декабря 2018

Я попытался написать скрипт для анализа файла JSON, хранящегося на сервере, и возврата его пар ключ / значение в элементы списка, содержащие соответствующие атрибуты в формате двоеточия.Я попытался сделать это с помощью нативных команд javascript.Хотя файл успешно проанализирован, и вы можете понять, что, вызывая различные элементы со ссылочными номерами (например, myObject.pets[1].animal или myObject.pets.length), цикл внутри кода, который должен захватывать все элементы, не работает.

Вот код 

<!DOCTYPE html>
<html>
<body>

<ul id="animals"></ul>

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObject = JSON.parse(this.responseText);
    var finalString = "";
    for (i in myObject.pets.length) {
        var currentItem = "<li>" + myObject.pets[i].animal + ": " + myObject.pets[i].name + "</li>";
        var finalString = finalString.concat(currentItem);
    }
    document.getElementById("animals").innerHTML = finalString;
  }
};
xmlhttp.open("GET", "animals.json", true);
xmlhttp.send();
</script>

</body>
</html>

Файл JSON 

>animals.json
{
    "pets":[
        { "animal":"dog", "name":"Fido" },
        { "animal":"cat", "name":"Felix" },
        { "animal":"hamster", "name":"Lightning" }
    ]
}

и ожидаемый результат 

<li>dog: Fido</li>
<li>cat: Felix</li>
<li>hamster: Lightning</li>

Ответы [ 3 ]

0 голосов
/ 25 декабря 2018 
for (i in myObject.pets.length) {
        var currentItem = "<li>" + myObject.pets[i].animal + ": " + myObject.pets[i].name + "</li>";
        var finalString = finalString.concat(currentItem);
    }

«myObject.pets.length» должен быть «myObject.pets»

0 голосов
/ 25 декабря 2018

Мне очень нравится ответ @ Мэтью.Вот версия, использующая map вместо reduce, которая делает код более многословным, но, на мой взгляд, его также легче читать. 

const petsString = '{"pets": [{"animal": "dog", "name": "Fido"}, {"animal": "cat", "name": "Felix"}, {"animal": "hamster", "name": "Lightning"}]}'

const petsArray = JSON.parse(petsString).pets

const petsHtml = petsObject
  .map(pet => `<li>${pet.animal}: ${pet.name}</li>`)
  .join("")

document.write(petsHtml)
0 голосов
/ 25 декабря 2018

Функциональность Javascript for ... проходит через свойства объекта, она не увеличивает переменную до предела, как вы ожидаете.Либо используйте его как

  • for (let i in myObject.pets), что даст i значение каждого ключа в объекте pets (с индексами в массиве, действующими как ключи в объекте).

  • Или, поскольку это стандартный массив, вы можете с ним многое сделать.Вы можете проходить через него обычно с помощью for (let i = 0; i < myObject.pets.length; i++), но исходя из того, что вы пытаетесь сделать, я рекомендую уменьшить .

Я включил демонстрацию, которая используетуменьшите, чтобы получить finalString современным способом JS.Если вы хотите придерживаться текущей функции, убедитесь, что вы не переопределяете finalString с var finalString в цикле, который вы в настоящее время делаете.Моя демонстрация не устанавливает innerHTML элемента, а записывает его в документ, но вы можете делать все, что захотите, с помощью finalString. 

let apiResult = '{"pets":[{ "animal":"dog", "name":"Fido" }, { "animal":"cat", "name":"Felix" }, { "animal":"hamster", "name":"Lightning" } ] }';

let jsonResult = JSON.parse(apiResult);
    
let finalString = jsonResult.pets.reduce((total, current) => {
  return total.concat("<li>" + current.animal + ": " + current.name + "</li>");
}, "");

document.write(finalString);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...