javascript - 使用AJAX抓取JSON数据，然后通过ElementID在HTML上输出数据

Question

我目前刚开始使用 AJAX 和 JSON，并且我被困在一些对你来说可能很简单的事情上。

我将使用 AJAX 从 JSON 获取数据，然后从那里我需要将数据输入到 HTML 页面上的指定 ElementID 中。

数据是段落，我被困在 Javascript 部分，我要从 JSON 获取数据，然后将其保存到 HTML 文档上的 ElementID。

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)

Answer 1

这将使用 Paragraphs 数组中的对象中的键作为要填充值的元素的 ID。

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 成为一个对象而不是数组，其中 ID 是该对象的键。