在AngularJS中使用重复键迭代json响应
在AngularJS中使用重复键迭代json响应
提问于 2018-06-02 23:34:17
我一直在尝试从我的angular应用程序中的API调用中获取响应json数据的一部分。
我尝试了各种组合，但我只能获取最后一条记录，而不是两条记录。
这是我的html
<div ng-controller="MyCtrl">
<li ng-repeat="x in textvalues">
{{ x.event.description }}
</li>
</div>和控制器代码
var myApp = angular.module('myApp', []);
function MyCtrl($scope, $http) {
$http.get('http://www.vizgr.org/historical-events/search.php?', {params: {format: 'json', query:'India', limit:'2'}}).then(function(response) {
$scope.textvalues = response.data;
console.log($scope.textvalues);
});
}API调用的响应如下：
{
"result": {
"count": "2",
"event": {
"date": "-293",
"description": "When an invasion of",
"lang": "en",
"category1": "By place",
"category2": "Persia",
"granularity": "year"
},
"event": {
"date": "-250",
"description": "The Mauryan s",
"lang": "en",
"category1": "By place",
"category2": "India",
"granularity": "year"
}
}
}我尝试在UI上循环打印事件描述
这是我的小提琴- http://jsfiddle.net/nirajupadhyay/Jd2Hw/105/
我已经尝试了响应数据的各种组合，但无法同时获得两个描述。
请帮帮忙。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-03 02:51:15
我觉得这个API是大错特错的。一个JSON对象永远不能有两个相同的键，但它们的值不同。如果您检查网络选项卡，那么您将看到响应在对象中只有一个事件键，它的值是对象返回的最后一个值。因此，尽管它可能会在字符串化版本中显示2个事件，但它永远不会在JSON对象中保存同一个键的2个值。
阅读Does JSON syntax allow duplicate keys in an object?
不要将format: json传递给API，而是不要为format传递任何参数。它将以xml格式给出结果。然后通过某个库或如下所示的代码将此xml格式转换为json格式。
var myApp = angular.module('myApp', []);
function MyCtrl($scope, $http) {
$http.get('http://www.vizgr.org/historical-events/search.php?', {
params: {
/* format: 'json', */
query: 'India',
limit: '2'
}
}).then(function(response) {
console.log(response.data);
var dom = parseXml(response.data);
var json = xml2json(dom)
console.log(json)
$scope.events = json.result.event;
});
function parseXml(xml) {
var dom = null;
if (window.DOMParser) {
try {
dom = (new DOMParser()).parseFromString(xml, "text/xml");
}
catch (e) { dom = null; }
}
else if (window.ActiveXObject) {
try {
dom = new ActiveXObject('Microsoft.XMLDOM');
dom.async = false;
if (!dom.loadXML(xml)) // parse error ..
window.alert(dom.parseError.reason + dom.parseError.srcText);
}
catch (e) { dom = null; }
}
else
alert("cannot parse xml string!");
return dom;
}
function xml2json(xml) {
try {
var obj = {};
if (xml.children.length > 0) {
for (var i = 0; i < xml.children.length; i++) {
var item = xml.children.item(i);
var nodeName = item.nodeName;
if (typeof (obj[nodeName]) == "undefined") {
obj[nodeName] = xml2json(item);
} else {
if (typeof (obj[nodeName].push) == "undefined") {
var old = obj[nodeName];
obj[nodeName] = [];
obj[nodeName].push(old);
}
obj[nodeName].push(xml2json(item));
}
}
} else {
obj = xml.textContent;
}
return obj;
} catch (e) {
console.log(e.message);
}
}
}在这里检查js fiddle。
Stack Overflow用户
发布于 2018-06-03 01:19:36
您引用的can never exist的object结构
{
"result": {
"count": "2",
"event": {
"date": "-293",
"description": "When an invasion of",
"lang": "en",
"category1": "By place",
"category2": "Persia",
"granularity": "year"
},
"event": {
"date": "-250",
"description": "The Mauryan s",
"lang": "en",
"category1": "By place",
"category2": "India",
"granularity": "year"
}
}
}如果任何key在对象中重复，它将覆盖JSON object key value pair中之前设置的value。API应该返回的内容应该类似于下面给出的内容，只有您才能获得所有的事件对象。
{
"result": {
"count": "3",
"event": [{
"date": "-250",
"description": "The Mauryan ''Lion Capital of Asoka'', is erected as part of a pillar at Sarnath, Uttar Pradesh in India (approximate date). It is now preserved at the Sarnath Museum in Sarnath.",
"lang": "en",
"category1": "By place",
"category2": "India",
"granularity": "year"
},
{
"date": "-250",
"description": "The Mauryan ''Lion Capital of Asoka'', is erected as part of a pillar at Sarnath, Uttar Pradesh in India (approximate date). It is now preserved at the Sarnath Museum in Sarnath.",
"lang": "en",
"category1": "By place",
"category2": "India",
"granularity": "year"
},
{
"date": "-250",
"description": "The Mauryan ''Lion Capital of Asoka'', is erected as part of a pillar at Sarnath, Uttar Pradesh in India (approximate date). It is now preserved at the Sarnath Museum in Sarnath.",
"lang": "en",
"category1": "By place",
"category2": "India",
"granularity": "year"
}]
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50658463
复制相关文章
相似问题