2

I am trying to access a JSON response data from the github job posting API. Here is the JSON response structure: 

 [
    {"id":"1", "title":"gameon"}, 
    {"id":"2", "title":"hardlife"},
    {"id":"3", "title":"lotsofbugs"}
 ]

I have been crazy finding solutions accessing id and title. I tried several ways like (assuming the response is stored in a JS variable named jsonResponse) this:

jsonResponse[0][1]["title"]

and even something like

jsonResponse[1]["title"]

but everything seems to not work at all. I want to access each id and title for every part of the response but I cannot find a way. I use to alert everything while testing it if I could access it. Everything it says is undefined whenever I try to access the JSON response data. Can someone please help me?

Improve this question
3
  • 2
    jsonResponse[0].title, jsonResponse[0].id, jsonResponse[1]["title"] is also fine. Commented Jun 28, 2015 at 21:58
  • As @dfsq says, your second example (jsonResponse[1]['title']) should work fine. Have you checked the console to ensure that you have no errors in your code, and that the request completes successfully? Commented Jun 28, 2015 at 22:01
  • yes @Rory McCrossan, your answer should be good, however when I check the console it says that the AJAX request successfully executed as it already returns a response. this is a bit weird though Commented Jun 28, 2015 at 22:15

2 Answers 2

Reset to default
4

If you want to access each in turn you can use the forEach function.

var response =  [
     {"id":"1", "title":"gameon"}, 
     {"id":"2", "title":"hardlife"},
     {"id":"3", "title":"lotsofbugs"}
];

response.forEach(function(obj) {   
   var id = obj.id;
   var title = obj.title;
   // Do things with the data here 
});
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

this gives me an error like: Uncaught TypeError: response.forEach is not a function
Are you copying the code exactly as I had it? It should work, forEach is a native function on the Array Prototype.
yes @ChadF, I copied the code exactly as you wrote it. I looked into the google chrome debugging tool console and it gives me Uncaught TypeError: response.forEach is not a function
If you're running this code right when you get it, it may still be stringified. Try var respObj = JSON.parse(response); Otherwise I have no idea what is wrong on your end. Run typeof on response and make sure it's an array.
I already figured it out. Notorious Pet() was correct, by using $.parseJSON() function of jquery i was able to turn the JSON into a javascript readable object and your code also works in looping through the array. Thanks a lot!
1

You are dealing with a javascript object if you are dealing with json data. You really should just use $.parseJSON() if you can, but if not, you should be able to access the object by using myObj.id and myObj.title. OR possibly myObj[0].id , myObj[0].title etc... (if you need more in depth, try the javascript object reference)

Just got some updated code and a JSFIDDLE for you... this is some code that kind of tests and demos the stringify and parseJSON functions so you can play around with it. As you can see it's getting the correct data and alerting it. :)

(function($){ 
    $(function(){  //document.ready

    var myResponseData = [
        {"id":"1", "title":"gameon"}, 
        {"id":"2", "title":"hardlife"},
        {"id":"3", "title":"lotsofbugs"}
     ];
        myResponseData = JSON.stringify(myResponseData);
        console.dir(myResponseData);
        var myObj = $.parseJSON(myResponseData);
        console.dir(myObj);
        alert(myObj[0].title);    
    });     
})(jQuery);

Also as the other answer suggests, you can use a for each loop to iterate over the contents. I would def console.dir() the response and make sure you are getting the data back correctly before ripping your hair out. :) Using chrome dev tools you can view the contents of the response by putting this line in your code...

console.dir(myResponseData);

You can also view the data going back and forth by clicking on "Network" in chrome dev tools, then clicking on the filename of your ajax script. It should default to 'Response' but if not, click on that.

enter image description here

enter image description here

Please let me know if you have any questions.

Improve this answer

4 Comments

Hi @Notorious Pet(), thanks for the suggestions. I am using chrome debugging tool finding it out even before posting the question. I really have trouble finding a solution as I know that it should have worked already. I do not think $parse.JSON is needed since it was already returned by the API call as a JSON response already
If you want to use the JSON in your script, you should use parseJSON if you are using jquery. api.jquery.com/jquery.parsejson It turns JSON into a javascript readable object, not the other way around.
you were right @Notorious Pet(), using the $.parseJSON of jquery helped by turning the JSON into a javascript readable object. however, my question is, isn't JSON already a javascript readable object by default?
JSON is just a string that is formatted a certain way. I've updated my answer with a JSFIDDLE link you can play around with if you like. Glad I could help.. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.