Использование AJAX для захвата данных JSON и вывода данных по ElementID на HTML

В настоящее время я новичок в использовании AJAX и JSON и застрял на чем-то простом для вас.

Я должен использовать AJAX для получения данных из JSON, затем мне нужно будет вводить данные в указанные ElementID на моей HTML-странице.

Данные - это параграфы, и я застрял в части Javascript, где я должен получить свои данные из JSON, а затем в ElementID в моем HTML-документе.

JSON

{

    "Paragraphs": [

        {
            "Paragraph1": "Hi! I am Person."
        },

        {
            "Paragraph2": "My name is Person and I am a web designer from a Place."
        }

    ]
}

JS

(function () {


    "use strict";
    // Instantiate new xhr object
    var dataFile = "scripts/app.json";
    var request = new XMLHttpRequest();
    request.open('GET', dataFile, true);
    request.addEventListener('readystatechange', function () {
        // wait for file to finish loading
        if (request.readyState === 4) {
            var paragraph = {};

            // read in the json object
            paragraph = JSON.parse(request.responseText);


            // declare local paragraph array container
            var paragraphArray = [];

            // read in the paragraphs array from the json object
            paragraphArray = paragraph.Paragraphs;

            //store
            var paragraphArrayLength = paragraphArray.length;
            //loop
            for (var number = 0; number < paragraphArrayLength; number++) {
                var paragraph = document.getElementById('Paragraph1' + 'Paragraph2' + (number + 1));
                Paragraphs.Paragraph1.innerHTML = paragraphArray[number];
                paragraphs.Paragraph2.innerHTML = paragraphArray[number];
            }
        }
    });
    request.send();

})();

HTML

<div class="container">
    <div class="jumbotron">
        <div class="text-center">
            <h1 id="Paragraph1"></h1>
            <img src="images/portfolio.jpg" class="img-circle" alt="Cinque Terre" width="150" height="150">
            <p class="lead" id="Paragraph2"></p>
            </ul>
        </div>
    </div>
</div>

Пожалуйста помоги! Спасибо 8)

Источник

3 ответа

Решение

Ваш html и javascript содержат ошибки, которые нужно исправить. Например, в html есть дополнительный тег ul, а "Paragraphs" должны быть "абзацами" в вашем цикле.

Тем не менее, формат данных может быть причиной того, что вам трудно. У вас есть массив объектов, и у каждого объекта есть ключ с другим именем. И хотя вы можете сделать это таким образом, с ним становится сложнее работать. Напротив, массив строк будет гораздо проще. Также см. Решение Barmar, которое является другой широко используемой альтернативой.

Чтобы было легче понять, я удалил весь посторонний код, включая цикл. Фрагмент просто записывает каждый абзац 1 и 2. Тем не менее, некоторые другие решения, приведенные здесь, показывают, как циклически проходить данные.

Запустите фрагмент, чтобы попробовать его.

// simulated ajax data
var request = {
  responseText: '{"Paragraphs":[{"Paragraph1":"Lions and tigers"},{"Paragraph2":"and bears"}]}'
};


// if (request.readyState === 4) { ...

var paragraph = JSON.parse(request.responseText);
var paragraphArray = paragraph.Paragraphs;

document.getElementById('Paragraph1').innerHTML = paragraphArray[0].Paragraph1;
document.getElementById('Paragraph2').innerHTML = paragraphArray[1].Paragraph2;
<h1 id="Paragraph1"></h1>
<p class="lead" id="Paragraph2"></p>

Источник

Это будет использовать ключи в объектах в Paragraphs массив как идентификаторы элементов для заполнения значениями.

for (var i = 0; i < paragraphArrayLength; i++) {
    for (var id in paragraphArray[i]) {
        document.getElementById(id).innerHTML = paragraphArray[i][id];
    }
}

Вложенные циклы необходимы, потому что ваши элементы массива являются объектами, а имена свойств различны в каждом объекте. Я рекомендую изменить структуру JSON, чтобы она была более однородной, например

{

    "Paragraphs": [

        {
            "id": "Paragraph1",
            "value": "Hi! I am Person."
        },

        {
            "id": "Paragraph2",
            "value": "My name is Person and I am a web designer from a Place."
        }

    ]
}

Или сделать Paragraphs объект вместо массива, где идентификаторы являются ключами этого объекта.

Источник 
            for (var number = 0; number < paragraphArrayLength; number++) {
            var paragraph = document.getElementById('Paragraph' + (number + 1);

            paragraph.innerHTML = paragraphArray[number -1].keys['Paragraph' + number];
        }

Когда вы повторяете абзацы, вы должны установить каждый из них в локальную переменную. Таким образом, у вас есть 1 абзац, над которым вы работаете, за одну итерацию.

Источник
Другие вопросы по тегам