0
テキスト属性とイメージ属性の両方を持つJSONファイルがあります。 JavaScript/AJAXを使用してこれらの両方を一緒に表示したいと思います。私は、テキストとイメージを表示することができましたが、別々の関数で表示しました。私はテキストを表示できるようにしたい、そして、イメージはそれの後に続く。JSONファイルからイメージとテキストを表示するには
テキストを表示するために私の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);
});
});
これまで行っていたコードを教えていただけますか? – rinukkusu
私は本当に問題はありません - テキストを表示する最初のループにイメージを追加するだけです。 – rinukkusu
@rinukkuuこれは私が苦労している、これらの2つのコードを結合して、すべての試みは構文エラーにつながります。 –