jQuery多维forloop json

时间:2018-12-06 13:48:52

标签: javascript jquery html arrays json

亲爱的

我正在努力使以下屏幕正常工作 Project progress screen 下面是我从PHP,MYSQL生成的json。鼠标悬停时,我希望项目与用户图像和名称一起显示。我在foloop和foreach选项中尝试了forloop。

请让我知道json,jquery是否存在问题

array = {  "Citi Bank": [
{
  "users": "Steve Mathew",
  "image": "img/user/stevemathew.jpg"
}  ],  "Amex Bank": [
{
  "users": "Jonas",
  "image": "img/user/jonas.png"
},
{
  "users": "Mark",
  "image": "img/user/mark.png"
},
{
  "users": "Steve Mathew",
  "image": "img/user/stevemathew.jpg"
},
{
  "users": "Sue",
  "image": "img/user/sue.png"
}  ],  "HFC": [
{
  "users": "Steve Mathew",
  "image": "img/user/stevemathew.jpg"
}  ],  "RBANK": [
{
  "users": "Jonas",
  "image": "img/user/jonas.png"
},
{
  "users": "Steve Mathew",
  "image": "img/user/stevemathew.jpg"
}  ],  "New Prospect": [
{
  "users": "Steve Mathew",
  "image": "img/user/stevemathew.jpg"
} ]}

我尝试了以下html和jquery

function progress(){
	
	$.ajax({
     type: 'POST',
	 url: 'project.php',
	 dataType: 'json',
	 success: function(result){
	var myJson=JSON.stringify(result);
	
console.log(myJson);

$("#zbt tr").remove();
				var txt = "";
                var len = myJson.length;
                var txt = "<tr><td>"+"<b>Prospect</b>"+"</td><td>"+"<b>Count</b>"+"</td></tr>";
				var txt = "<tr><td>"+"<b>S.No</b>"+"</td><td>"+"<b>Prospect</b>"+"</td><td>"+"<b>Users</b>"+"</td>";
				var i,j,arrayItem;
                if(len > 0){
                    for(var i=0;i<len;i++){
							txt += "<tr><td>"+1+"</td><td><a>"+myJson[i]+"</a><br/></td><td>"
							txt += "<ul class='list-inline'><br>";
							for (j = 0; j < arrayItem[i].length; j++) {
							txt += "<li><img src='"+myJson[i][j].image+"' title='"+myJson[i][j].users+"' class='user-image' alt='Avatar' style=width:50% class='img-circle'></li><br>";
							}
							txt += "</ul></td><br>";							
					}
					console.log(txt);
                    }
                    if(txt != ""){
                        $("#zbt").append(txt);
                    }	
                },
error: function(e){ 
console.log(e);
} 
})
}

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="zbt" border='1' style="width: auto; height: auto; box-shadow: 5px 5px 6px rgba(41, 38, 38, 0.55);  max-width: 400px;">
					<b><tr class='clickable-row' font size="3">
					<td>S.No</td><td>Prospect</td><td>Users</td><td>Progress</td><td>Trend</td>
					</tr>
					</b>
					</table>

任何输入都会有很大帮助!

最诚挚的问候

1 个答案:

答案 0 :(得分:0)

由于有一个对象,因此无法像遍历数组那样遍历该对象。

您可以使用Object.entries

将对象转换为数组
var realArray = Object.entries(array);

这将为您提供2个条目的数组,一个用于键,另一个用于值。然后可以使用for循环遍历数组。

另一种解决方案是在对象本身上使用for in循环。

例如:

for (var key in array) {
  // key is the name of the entry key
  // use array[key] to access the entries
  console.log(key, array[key]);
}