Return object from multiple getJSON responses

Question

I have a function that calls a paginated API, loops through each of the pages and returns data from from each of the responses:

function nextPage(url) {
    if (!url) {
        return;
    }
    $.getJSON(url, function(data) {
        nextPage(data.next);
        $.each(data.results, function (k, v) {
            console.log(v.city_name);
        });
    });
}

nextPage('http://url.com/api/v1/cities/?page=1');

Currently, when I log the response to the console I get something that looks like this:

Paris
Brussels
Mexico City
...

But what I want is a structure that looks this this:

[
  {item: 'Paris'},
  {item: 'Brussels'},
  {item: 'Mexico City'}
]

For reference the response data looks like this:

{
    "count": 105,
    "next": "http://url.com/api/v1/cities/?page=2",
    "previous": null,
    "results": [
        {
            "city_detail": "http://url.com/api/v1/cities/1/",
            "city_name": "Paris"
        },
        {
            "city_detail": "http://url.com/api/v1/cities/2/",
            "city_name": "Brussels"
        },
        {
            "city_detail": "http://url.com/api/v1/cities/3/",
            "city_name": "Mexico City"
        }
    ]
}

I know the answer is staring me in the face and is probably v. simple, but my lack of javascript knowledge is letting me down. Would appreciate help solving this. Thanks!

EDIT

The problem seems to be that the nextPage function makes multiple calls, returning data from each page of JSON. I can get this data into multiple objects, but not one object representing all the responses.

One more note.. The reason its not giving you anything is because the url is not a JSON.. Meaning it has to end with a .json .. An example is: cdn.rawgit.com/amanuel2/Collabs/master/list.json I will edit anwser to show you a fiddle that will work.. — amanuel2
– amanuel2, Commented Mar 22, 2016 at 23:50
The actual url looks more like this: http://127.0.0.1:8000/api/v1/cities/?format=json and renders as JSON in the browser. I just simplified it for the question. — sammy88888888
– sammy88888888, Commented Mar 22, 2016 at 23:54
This is almost there, I think. However it returns an object for each of the JSON pages that is accessed, rather that one object for all the pages. I also cannot access the data outside of the function. — sammy88888888
– sammy88888888, Commented Mar 23, 2016 at 0:15
Im not understanding you sammy... Every post is wrapped in an object.? Im confued. Can you try rewording or giving me a picture or something visual? — amanuel2
– amanuel2, Commented Mar 23, 2016 at 0:18

amanuel2 · Accepted Answer · 2016-07-06 12:36:24Z

So basically you want to store key:value pair to an object..:

Dot Notation:

var cities = {}
function nextPage(url) {
    if (!url) {
        return;
    }
    $.getJSON(url, function(data) {
        nextPage(data.next);
        $.each(data.results, function (k, v) {
            console.log(v.city_name);
            cities.name = v.city_name  //Push to an object
        });
    });
}

So youll get this as a response:

cities = [
  {city: 'Paris'},
  {city: 'Brussels'},
  {city: 'Mexico City'}
]

Bracket Notation:

var cities = {}
function nextPage(url) {
    if (!url) {
        return;
    }
    $.getJSON(url, function(data) {
        nextPage(data.next);
        $.each(data.results, function (k, v) {
            console.log(v.city_name);
            cities["name"]= v.city_name  //Push to an object
        });
    });
}

Result

: (Same for both)

cities = [
  {city: 'Paris'},
  {city: 'Brussels'},
  {city: 'Mexico City'}
]

EDIT

Ok so there was another problem! It was sneaky but we finnaly caught it. So the problem was here:

$.getJSON(url, function(data) {
  console.log(data.results)
    nextPage(data.next);
    $.each(data, function (k, v) {
        cities["title"]= v.title  //Push to an object
    });
});

There now, you see it says data.results ... Actually data.results is an empty undefined variable.. What you should do is only data which consists the whole data. You might not understand it now but look over the code i represented below ...

var dataJSON;
function nextPage(url) {
    if (!url) {
        return;
    }
    $.getJSON(url, function(data) {
      console.log(data) //This consits the data on the below provided url...
        dataJSON = data; // Just making a public variable assigned to the data..
        nextPage(data.next);
        $.each(data, function (k, v) {
        });
    });
}

nextPage('https://cdn.rawgit.com/amanuel2/Collabs/master/list.json')

Plunker go to console to view data....

EDIT2

Ok this is preety much your JSON File i put in GITHUB, so i have a secure HTTPS://.. Anways here i just did data.results and i got this result:

And here is the Plunker! Hope this helped!!

EDIT3

Ok now this is the last bit.. With your 2nd JSON Page.. You 2nd JSON Page had actually syntax errors.. So i fixed those put it in github and uploaded the new JSON.. Here is the plunker..

Link to Read More about Objects..

That's the approach I was trying take, however when I console.log the object outside of the function it returns nothing.
Sorry @sammy88888888 .. I cant make a representation of a fiddle since i dont have data.. Can you give a simple plunk/fiddle/codepen? Thankyou.

char · Accepted Answer · 2016-03-23 06:00:11Z

0

var results = []
function nextPage(url) {
    if (!url) {
        return;
    }
    $.getJSON(url, function(data) {
        nextPage(data.next);
        $.each(data.results, function (k, v) {
            results.push({item: v.city_name})
            console.log(v.city_name);
        });
    });
}
console.log(results) 
// should show an array with {item: city_name} objects.

this allows the results array to be accessed in the outer scoped as well.

answered Mar 23, 2016 at 6:00

char

915 bronze badges

Collectives™ on Stack Overflow

Return object from multiple getJSON responses

2 Answers 2

Dot Notation:

Bracket Notation:

Result

EDIT

EDIT3

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Dot Notation:

Bracket Notation:

Result

EDIT

EDIT3

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest