Iterating over json response with duplicate keys in AngularJS [duplicate] - angularjs

Question

This question already has answers here:
How to get the JSON with duplicate keys completely in javascript
(5 answers)
Closed 4 years ago.
I have been trying to fetch a section of the response json data from an API call in my angular application.
I have tried various combinations but I am only able to fetch the last record and not both the records.
Here is my html
<div ng-controller="MyCtrl">
<li ng-repeat="x in textvalues">
{{ x.event.description }}
</li>
</div>
and the controller code
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);
});
}
The response from the API call is as follows:
{
"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"
}
}
}
And I am trying to print the event description in loop on the UI
Here is my fiddle - http://jsfiddle.net/nirajupadhyay/Jd2Hw/105/
I have tried various combination of the response data but unable to get to both the descriptions.
Kindly help.

Answer 1

I feel this API is somehow massively wrong. A JSON object can never have 2 identical keys with different values in them. If you check the network tab, then you will see that the response has only 1 event key in the object its value is the last value that is returned by the object. So although it might show 2 events in stringified version but it will never hold 2 values to same key in a JSON object.
Read Does JSON syntax allow duplicate keys in an object?
Instead of passing format: json to API, do not pass any param for format. It will give the result in xml format. Then convert this xml format to json format either by some library or the code as shown below.
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);
}
}
}
Check js fiddle here.

Answer 2

As Nandita Arora Sharma answered the API response is wrong.
RFC-7159, standard for JSON published by (IETF), states:
" 4. Objects
... single colon comes after each name, separating the name
from the value. A single comma separates a value from a following
name. The names within an object SHOULD be unique."
API Test with Postman. Which renders the JSON and as mentioned and there is only one event. This is possibly the reason why angular can only repeat 1 time
within the raw data has all event object with duplicated keys.

Answer 3

You need to pass $http as a parameter to your controller , you can see the particular error says "$http is not defined" in controller
function MyCtrl($scope,$http) {
WORKING FIDDLE
To answer your actual question, your service returns an object not an array . iT returns an object of object. so you cannot use ng-repeat in this case. it returns on
{"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"}}}
inorder to access event you can just use
{{textvalues.result.event.description}}
DEMO

Answer 4

The object structure that you are referring to 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"
}
}
}
If any key is repeated in an object, it overrides the previous set value in the JSON object key value pair. What the API should return should be something like given below, then only you can get all event objects.
{
"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"
}]
}
}