如何在JSON循环中添加多数组

How to add multi array in loop JSON?

本文关键字：添加 数组 循环 JSON      更新时间：2023-09-26

我的问题不太清楚，但我不知道如何解释。所以我有我的清单。像这样的Json 

function get_json(){
	var results = document.getElementById("results");
    var hr = new XMLHttpRequest();
    hr.open("GET", "mylist.json", true);
    hr.setRequestHeader("Content-type", "application/json", true);
    hr.onreadystatechange = function() {
	    if(hr.readyState == 4 && hr.status == 200) {
			var d = JSON.parse(hr.responseText);
			results.innerHTML = "";
			for(var o in d){
				results.innerHTML += 
				'<div class="'+d[o].place+'"><h2>'+d[o].name+'</h2><div class="gallery"></div></div>';
			} //for(var o in d)
	    }
    }
    hr.send(null);
    results.innerHTML = 'Please wait...';
{
	"product1":{
			"name": "apple",
			"place": "X",
			"image": [	{"pic": 1, "review": "Review for pic 1"},
						{"pic": 2, "review": "Review for pic 2"},
						{"pic": 3, "review": "Review for pic 3"}
					]
	},
	"product2":{
			"name": "milk",
			"place": "Y",
			"image": [	{"pic": 1, "review": "Review for pic 1"},
						{"pic": 2, "review": "Review for pic 2"}
					]
	}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
</div>
<script>get_json();</script>

您可以看到，根据X或Y的位置，我将为每个产品创建X或Y类。在每个div中，我有产品名称和。gallerydiv。问题是:我如何定义每个产品的"pic"answers"review"，并将它们添加到。gallerydiv中作为img和p。它支持在最后看起来像这样。请帮帮我。I am new with json.

<div id="results">
  <div class="X">
    <h2>Apple</h2>
    <div class="gallery>
        <img src="1.png">
        <p>Review of pic 1</p>
        <img src="2.png">
        <p>Review of pic 2</p>
        <img src="3.png">
        <p>Review of pic 3</p>    
     </div>                     
  </div>
                        
   <div class="Y">
    <h2>Milk</h2>
    <div class="gallery>
        <img src="1.png">
        <p>Review of pic 1</p>
        <img src="2.png">
        <p>Review of pic 2</p>  
     </div>                     
  </div>                       
                        
                        
</div>

?

你需要一个双嵌套循环。例如:

for(var o in d)
{
    results.innerHTML += 
    '<div class="'+d[o].place+'"><h2>'+d[o].name+'</h2><div class="gallery">';
    for(var i in d.image)
    {
         results.innerHTML += '<img src="' + d.image[i].pic + '.png" />';
         results.innerHTML += '<p>' + d.image[i].review + '</p>';
    }
    results.innerHTML += '</div></div>';       
}
相关文章：