angularjs - 在 AngularJS 中使用重复键迭代 json 响应

Question

我一直在尝试从我的 Angular 应用程序中的 API 调用中获取响应 json 数据的一部分。

我尝试了各种组合，但我只能获取最后一条记录，而不能获取两条​​记录。

这是我的 html

<div ng-controller="MyCtrl">
<li ng-repeat="x in textvalues">
       {{ x.event.description }}
</li>
</div>

和 Controller 代码

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 上循环打印事件描述

这是我的 fiddle - http://jsfiddle.net/nirajupadhyay/Jd2Hw/105/

我尝试了响应数据的各种组合，但无法获得这两种描述。

请帮忙。

Answer 1

我觉得这个 API 在某种程度上有很大的错误。 JSON 对象永远不能有 2 个相同的键，但其中包含不同的值。如果您检查网络选项卡，您将看到响应在对象中只有 1 个事件键，其值是对象返回的最后一个值。因此，虽然它可能会在字符串化版本中显示 2 个事件，但它永远不会在 JSON 对象中将 2 个值保存到同一键。

阅读Does JSON syntax allow duplicate keys in an object?

不要将 format: json 传递给 API，而是不要传递任何格式参数。它将给出 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在这里。