Question

我有一个 JSON 数据和代码中的div。我想从JSON文件中获取连接数据到 people-update-container div。我尝试了下面的代码。但这不起作用。请帮助我从JSON文件中获取连接中的数据。 JSOn数据和 people-update-container 文件位于同一HTML页面中。谢谢。

var feed_json = [{  
		   
     'teams' : [    {"total_count": '32'},
        "count" : "10",
                      "url"       : ""
                    },
                    { "id" : "id2", 
                      "name" : "Group 2",
                      "count" : "55",
                      "url"       : ""
        }        
     
     ],
     
     'connections': [  {'total_count' : '110'},
                    
	                   { "id" : "id1",
	                      "name" : "Gossip Gang",
	                      "count" : "20",
	                      "url"       : ""
	                   },
	                   { "id" : "id2", 
	                      "name" : "JEC Folks",
	                      "count" : "90",
	                      "url"       : ""
	                   }                    
	                ]
                
}];



var feedConnections = feed_json.connections;

		for(var i = 0; i < feedConnections.length; i++ ) {
			var connection = feedConnections[i];

			var id = connection.id;
			var name = connection.name;
			var count = connection.count;

			var connectionFeed = $('<div><div  id = '+ id +'  style = "margin-top: 10px;"> <span class="expandIcon1" style="float: right;"> <img  width="28" height="28" src="/media/images/icons/arrow-Down-lines.png"/> </span> <span class="barTitle">'+ name + '<span>  (' + count + ')</span></span></div></div>');

			$('.people-update-container').append(connectionFeed);
		}

<div class = "people-update-container" style = "display: none;">

</div>

Answer 1

var connections = connections[0] /* !!! */
for (var key in connections) { // You're not iterating an array, but the object inside!

            var id = connections[key].id;
            var name = connections[key].name;
            var count = connections[key].count;

}

Answer 2

ost浏览器支持JSON.parse（），它在ECMA-262第5版（JS所基于的规范）中定义。它的用法很简单：

var json = '{"result":true,"count":1}',
    obj = JSON.parse(json);

alert(obj.count);

对于不适合的浏览器，您可以使用json2.js实现它。

如评论中所述，如果你已经在使用jQuery，那么有一个$ .parseJSON函数可以映射到JSON.parse（如果可用）或者是旧版浏览器中的eval形式。但是，这会执行额外的，不必要的检查，这些检查也由JSON.parse执行，因此为了获得最佳的全面性能，我建议使用它，如下所示：

var json = '{"result":true,"count":1}',
    obj = JSON && JSON.parse(json) || $.parseJSON(json);

这将确保您立即使用本机JSON.parse，而不是让jQuery在将字符串传递给本机解析函数之前对字符串执行完整性检查。

此代码是从此link

导入的

Answer 3

您的Json无效。尝试使用jsonlint.com验证json 这是有效的。

{
"teams": [{
        "total_count": "32",
        "count": "10",
        "url": ""
    }, {
        "id": "id2",
        "name": "Group 2",
        "count": "55",
        "url": ""
    }

],

"connections": [{
        "total_count": "110"
    },

    {
        "id": "id1",
        "name": "Gossip Gang",
        "count": "20",
        "url": ""
    }, {
        "id": "id2",
        "name": "JEC Folks",
        "count": "90",
        "url": ""
    }
]

}

Answer 4

这会奏效。通过添加jquery cdn路径解决jquery错误问题出在你的json数据上，这有一些错误。

＆＃13;

var feed_json = {
"teams": [{
		"total_count": "32",
		"count": "10",
		"url": ""
	}, {
		"id": "id2",
		"name": "Group 2",
		"count": "55",
		"url": ""
	}

],

"connections": [{
		"total_count": "110"
	},

	{
		"id": "id1",
		"name": "Gossip Gang",
		"count": "20",
		"url": ""
	}, {
		"id": "id2",
		"name": "JEC Folks",
		"count": "90",
		"url": ""
	}
]

};


var feedConnections = feed_json.connections;

		for(var i = 0; i < feedConnections.length; i++ ) {
			var connection = feedConnections[i];

			var id = connection.id;
			var name = connection.name;
			var count = connection.count;

			//var connectionFeed = $('<div><div  id = '+ id +'  style = "margin-top: 10px;"> <span class="expandIcon1" style="float: right;"> <img  width="28" height="28" src="/media/images/icons/arrow-Down-lines.png"/> </span> <span class="barTitle">'+ name + '<span>  (' + count + ')</span></span></div></div>');

		//	$('.people-update-container').append(connectionFeed);
alert(name);
		}

＆＃13;

<div class = "people-update-container" style = "display: none;">

</div>

＆＃13;

Answer 5

您可以通过XHR请求获取JSON数据：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        var json_data = JSON.parse(xhttp.responseText);
        var connections = json_data.connections;

        /* Do something with the data */
    }
};
xhttp.open("GET", "/path/to/json/file.json", true);
xhttp.send();

但在您必须将数据格式化为正确的JSON之前，请执行以下操作：

{
    teams: [ ... ],
    connections: [ ... ]
}

了解JSON here。

如何从JSON文件中获取数据

5 个答案: