Question

我一直在尝试从我的角度应用程序中的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/

我尝试了各种响应数据组合但无法同时获取这两种说明。

请帮助。

Answer 1

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

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

不要将格式：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。

Answer 2

正如Nandita Arora Sharma所回答，API回应是错误的。

RFC-7159，（IETF）发布的JSON标准，声明：

＆＃34; 4.对象

...单个冒号出现在每个名称后面，将名称分开   从价值。单个逗号将值与后续值分开   名称。对象中的名称应该是唯一的。＆＃34;

邮递员的API测试。这提供了JSON和提到的，只有一个事件。这可能是角度只能重复1次

的原因

在原始数据中，所有事件对象都有重复的键。

Answer 3

您需要将 $http 作为参数传递给控制器，您可以在控制器中看到特定错误"$http is not defined“

function MyCtrl($scope,$http) {

<强> WORKING FIDDLE

要回答您的实际问题，您的服务将返回一个对象而不是一个数组。 iT返回一个对象的对象。所以你不能在这种情况下使用ng-repeat。它返回

{ “结果”：{ “计数”： “3”， “事件”：{ “日期”： “ - 250”， “说明”：“的 Mauryan''Asoka的狮子之都''，作为支柱的一部分竖立起来 Sarnath，Uttar Pradesh在印度（大约日期）。就是现在保存在美国鹿野苑博物馆鹿野苑“”郎“：”恩“‘类别1’：”通过地方”， “类别2”： “印度”， “粒度”： “年”}}}

为了访问事件你可以使用

   {{textvalues.result.event.description}}

<强> DEMO

Answer 4

您所指的object

can never exist结构

{
  "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对象value中的先前集key value pair。 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"
    }]
  }
}

使用AngularJS中的重复键迭代json响应

4 个答案: