How can I get specific data from an output of json data?

Question

I have a set of json data that has been output via a url. The data has got different levels and I need to access one level and then use that data in a jquery loop to manipulate some functions.

The json url outputs data like this:

{
"id": 32,
"title": "sascas",
"synopsis": "<p>cxcxcx</p>\r\n",
"body": "<p>cxccxxc</p>\r\n",
"created_at": "2014-09-25T14:12:06.345Z",
"updated_at": "2014-09-25T14:12:06.345Z",
"author": {
"name": "A test author",
"biography": "/system/authors/avatars/000/000/024/original/photo.JPG?1411472688",
"id": 24
},
"schools": {
"schools": [
{
"id": 5,
"school_name": "Another london school Inner Circle Regent's Park, London",
"website": null,
"book_id": 32,
"created_at": "2014-09-25T14:12:06.413Z",
"updated_at": "2014-09-25T14:12:06.413Z"
},
{
"id": 6,
"school_name": "city of london school 107 Queen Victoria St London",
"website": null,
"book_id": 32,
"created_at": "2014-09-25T14:12:06.417Z",
"updated_at": "2014-09-25T14:12:06.417Z"
}
]
}
}

I am basically trying to access the schools data only in this loop within a js function. Currently the function uses and each loop and adds markers onto a map. What I want to know is can my function get the schools data only? Here is my js function for it:

var initMap = function () {

# The url that is generated in the html for me to grab
var info = $('#map').data('book-title');
$.get(info, {}, function(response) {
setMarkers(map, response);
# some other js stuff for map here inside the $get
}, 'json');

}

Then in the setmarkers function I have this:

function setMarkers(map, json) {
jQuery.each(json, function (index, city) {
var school = city['schools'];
console.log(school);
});
}

In the output in console I get this:

[Object, Object]0: Object book_id: 32 created_at: "2014-09-25T14:12:06.413Z"id: 5school_name: "Another london school Inner Circle Regent's Park, London" updated_at: "2014-09-25T14:12:06.413Z" website: null__proto__: Object__define Getter__: function __defineGetter__() { [native code] }__defineSetter__: function __defineSetter__() { [native code] }__lookupGetter__: function __lookupGetter__() { [native code] }__lookupSetter__: function __lookupSetter__() { [native code] }constructor: function Object() { [native code] }hasOwnProperty: function hasOwnProperty() { [native code] }isPrototypeOf: function isPrototypeOf() { [native code] }propertyIsEnumerable: function propertyIsEnumerable() { [native code] }toLocaleString: function toLocaleString() { [native code] }toString: function toString() { [native code] }valueOf: function valueOf() { [native code] }get __proto__: function __proto__() { [native code] }set __proto__: function __proto__() { [native code] }1: Objectbook_id: 32created_at: "2014-09-25T14:12:06.417Z"id: 6school_name: "city of london school 107 Queen Victoria St London"updated_at: "2014-09-25T14:12:06.417Z"website: null__proto__: Objectlength: 2__proto__: Array[0]

I need to access specific data from this array namely school_name . Is this possible at all?

Answer 1

console.dir(school)

-- May give you a clearer view of what you're seeing.

As another poster said, since school is an array of schools, you best bet is to iterate over that. You can use the .each method you're currently utilizing elsewhere via jQuery or a standard for loop in javascript.

for (var i = 0; i < schools.length; i++) {
  //Party with stuff in here
}

Best of luck!

Answer 2

This jQuery.each will print school data:

 jQuery.each(response.schools.schools, function (i, school) {
        console.log( "id " + school["id"] + ", school_name: " + school["school_name"]  );
  });

or alternative

jQuery.each(response.schools.schools, function (i, school) {
    console.log( "id " + school.id + ", school_name: " + school.school_name  );
});

Prints:

id 5, school_name: Another london school Inner Circle Regent's Park, London

id 6, school_name: city of london school 107 Queen Victoria St London

Note my fiddle was done without JSON request.