Wie zeige ich Bild und Text aus meiner JSON-Datei an

Question

Ich habe eine JSON-Datei, die sowohl Textattribute als auch ein Bildattribut hat. Ich möchte diese beiden zusammen mit JavaScript/AJAX anzeigen. Ich habe es geschafft, den Text und die Bilder anzuzeigen, aber auf separaten Funktionen. Ich möchte den Text und das Bild danach anzeigen lassen.

Meine JSON-Datei (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"}, 
] 

-Code, den Text anzuzeigen ...

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(); 
} 

Code, um das Bild anzuzeigen ...

$(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

Merging diese beiden Funktionen würden Sie mit:

enden

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(); 
}