如何显示JSON文件中的图像和文本

Question

我有一个同时具有text属性和image属性的JSON文件。我想使用JavaScript/AJAX同时显示这两者。我已经设法显示了文本和图像，但在不同的函数上。我希望能够显示它后面的文本和图像。

我的JSON文件(phones.json)

[
      { "name":"Samsung Galaxy S6 Edge+",
        "year":2015,
        "manufacture":"Samsung",
        "description":"Samsung Galaxy S6 Edge+ is an Android smartphone manufactured and marketed by Samsung Electronics. The S6 line serves as a successor to the Galaxy S5. The S6 and S6   Edge smartphones were officially unveiled in the first Samsung Unpacked 2015 event at Mobile World Congress on 1 March 2015, while the bigger S6 Edge+ was officially unveiled together with the Samsung Galaxy Note 5 in the second Samsung Unpacked 2015 event at New York on 13 August 2015. Alongside the S6, Samsung also unveiled the S6 Edge (and later on the bigger S6 Edge+), a variant whose screen is wrapped along the sides of the device; the curvature is usable for several additional features. The Galaxy S6 and S6 Edge were released on 10 April 2015 in 20 countries while the S6 Edge+ was released on 21 August 2015 in 20 countries.",
        "lat": 53.645792,
        "lng":  -1.785035,
        "imgPath": "img/s6Edge+.jpg"},

      { "name":"Samsung Galaxy S6 Edge",
        "year":2015,
        "manufacture":"Samsung",
        "description":"Samsung Galaxy S6 Edge is an Android smartphone manufactured and marketed by Samsung Electronics. The S6 line serves as a successor to the Galaxy S5. The S6 and S6 Edge smartphones were officially unveiled in the first Samsung Unpacked 2015 event at Mobile World Congress on 1 March 2015, while the bigger S6 Edge+ was officially unveiled together with the Samsung Galaxy Note 5 in the second Samsung Unpacked 2015 event at New York on 13 August 2015. Alongside the S6, Samsung also unveiled the S6 Edge (and later on the bigger S6 Edge+), a variant whose screen is wrapped along the sides of the device; the curvature is usable for several additional features. The Galaxy S6 and S6 Edge were released on 10 April 2015 in 20 countries while the S6 Edge+ was released on 21 August 2015 in 20 countries.",
        "imgPath": "img/s6Edge+.jpg"},
]

显示文本的代码...

window.onload = function()
{
function ajax_get_json(){
var results = document.getElementById("results");
var hr = new XMLHttpRequest();
hr.open("GET", "js/phones.json", true);
hr.setRequestHeader("Content-type", "application/json", true);
hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var data = JSON.parse(hr.responseText);
        results.innerHTML = "";
        for(var obj in data){
        results.innerHTML += "<h3>"+data[obj].name+" was first introduced in "+data[obj].year+" and was unvield by "+data[obj].manufacture+ "</h3><br><p>" +data[obj].description+ +""+"</p><hr />";

        }
    }
}
hr.send(null);
results.innerHTML = "requesting...";
}

ajax_get_json();
}

显示图像的代码...

    $(document).ready(function () {
    var jsonURL = "js/phones.json";
    $.getJSON(jsonURL, function (json) 
    {
    var imgList= "";

    $.each(json, function () {
    imgList += '<img class="img-responsive" src= "' + this.imgPath + '">';
    });

    $('#results').append(imgList);
    });
    });

Answer 1

将这两个函数合并在一起，最终会得到：

window.onload = function()
{
    function ajax_get_json(){
        var results = document.getElementById("results");
        var hr = new XMLHttpRequest();
        hr.open("GET", "js/phones.json", true);
        hr.setRequestHeader("Content-type", "application/json", true);
        hr.onreadystatechange = function() {
            if(hr.readyState == 4 && hr.status == 200) {
                var data = JSON.parse(hr.responseText);
                results.innerHTML = "";
                var imgList= "";

                for(var obj in data) {
                    results.innerHTML += "<h3>"+data[obj].name+" was first introduced in "+data[obj].year+" and was unvield by "+data[obj].manufacture+ "</h3><br><p>" +data[obj].description+ +""+"</p><hr />";

                    imgList += '<img class="img-responsive" src= "' + data[obj].imgPath + '">';
                }

                $('#results').append(imgList);
            }
        }
        hr.send(null);
        results.innerHTML = "requesting...";
    }

    ajax_get_json();
}