Accessing JSON objects from objects without titles in JQuery

Question

I am receiving this JSON file back from an AJAX call:

[
    {
        "LINKNAME": "Annual Training",
        "HITS": 1
    },
    {
        "LINKNAME": "In Focus Newsletter",
        "HITS": 1
    },
    {
        "LINKNAME": "NITA (secured)",
        "HITS": 1
    },
    {
        "LINKNAME": "Your Current Events",
        "HITS": 1
    },
]

Here is my AJAX call:

$(document).ready(function(e) {
    $.ajax({
        method: "GET",
        url: url,
    }).done(function(api) {
        console.log(api);
        var obj = JSON.parse(api),
            totRes = Object.keys(obj).length;
        $.each(obj.children, function (index, value) {
            alert(value);
        });
    }).fail(function( jqXHR, textStatus ) {
        alert('Service Catalog: Error loading '+jqXHR+' data. Request fail caused by: '+textStatus);
    });
});

I need to be able to extract the data from the JSON and use it but since the JSON objects aren't gioven a title then I am unsure how to extarpolate the data inside the inner object. Thanks in advance. Please ask if you do not understand my question.

Yes, it is an `array` or else you can iterate over `Object.keys(obj)` array. — Tushar, Jun 10 '15 at 14:59
possible duplicate of [Loop through array in JavaScript](http://stackoverflow.com/questions/3010840/loop-through-array-in-javascript) — Josh Beam, Jun 10 '15 at 15:10

score 1 · Accepted Answer · edited May 23 '17 at 11:45

Your JSON is just an array of plain objects.

To iterate over an array, you can use various methods. Since you're using jQuery, I'll just suggest $.each:

var arr = JSON.parse(api);

$.each(arr, function(i, obj) {
    // access whatever property you want... obj[LINKNAME] or whatever
});

You can also use Array.prototype.forEach, or even just your basic for loop:

arr.forEach(function(obj) {
    // obj is the current plain object... e.g. { LINKNAME: 'whatever', HITS: 0 }
});

I would also consider paying attention to how you are referring to the objects that you are receiving. While it is true that arrays are objects, and plain objects are objects, I would probably stick to referring to an array as an array, and a plain object as an object. This is because what you are receiving, in the form of JSON, is an array object of plain objects (or more simply, an array of objects).

Calling the array an "object" and referring to it as obj may confuse you when reading through the code quickly (yes, it is a good abstraction for potential extensibility if you end up not always receiving an array, but that's not the case here.)

Also, to once you have access the object in the each loop, you can iterate over the properties of the object if you need to (taken from this answer):

var obj = {
  "a": 1,
  "b": 2,
  "c": 3
};

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) { 
  // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
    alert("prop: " + prop + " value: " + obj[prop])
  }
}

WOW Total brain fart! I didn't realize I was using the .children on the call to the array object. This was a change over because it used to send XML and now the data comes in as JSON (much to my behest) but thanks for pointing out the error and providing the JQuery fix — Erik Grosskurth, Jun 10 '15 at 15:11

score 1 · Answer 2 · answered Jun 10 '15 at 15:03

First, you can add the setting dataType: 'json' when you send a request. This way you'll have api as javascript array.

Then you'll be able to iterate it via javascript for.

$.ajax({
  method: "GET",
  url: url,
  dataType: "json"
}).done(function(api) {
  for (var i = 0; i < api.length; i++) { 
    var name = api[i]["LINKNAME"],
        hits = api[i]["HITS"];
    // ...
  }
// ...

score 1 · Answer 3 · answered Jun 10 '15 at 15:09

$(document).ready(function(e) {
    $.ajax({
        method: "GET",
        url: url,
    }).done(function(api) {
        if (api && api.length > 0) {
            api.forEach(function (item) {
                console.log(item); // logs whole object
                console.log('item name %s', item.LINKNAME);
                console.log('item hits %s', item.HITS);
            });
        }
    }).fail(function( jqXHR, textStatus ) {
        alert('Service Catalog: Error loading '+jqXHR+' data. Request fail caused by: '+textStatus);
    });
});

You can filter the results to make sure you're only using objects that contain both 'LINKNAME' and 'HITS' pretty easily:

.done(function(api) {
    if (api && api.length > 0) {
        var objs = api.filter(function (item) {
            return item.hasOwnProperty('LINKNAME') && item.hasOwnProperty('HITS');
        });
        objs.forEach(function (item) {
            console.log(item); // logs whole object
            console.log('item name %s', item.LINKNAME);
            console.log('item hits %s', item.HITS);
        });
    }
});

Accessing JSON objects from objects without titles in JQuery

3 Answers3