access nested json data from ajax call

Question

I am interfacing with an API which returns JSON data to me. As the results are not stored in a file, but rather server memory, I am having a hard time figuring out how to access the data and write it to my html webpage. Here's what my $.ajax call looks like:

        $.ajax({
            type: "post",
            url:"https://www.xxx/v1/trips/search?  key=xxxx",
            data:JSON.stringify({request : requestTrav1Dest1}),
            dataType:"json",
            success:successFunction,
            headers:{"Content-Type":"application/json"}
            });

Here's what the JSON I get back from the server looks like:

{
"kind": "#tripsSearch",
"trips": {
  "kind": "#tripOptions",
  "tripOption": [
   {
    "saleTotal": "USD294.10",
    "id": "DMfSXrkVQGKTVQsDD5l60N004",
   },
    "saleTotal": "USD333.10",
    "id": "DMfSXrkVQGKTVQsDD5l60N002",
   },
   {
    "saleTotal": "USD225.94",
    "id": "DMfSXrkVQGKTVQsDD5l60N005",
   }
  ]
 }
}

What I really need is the saleTotal for each tripOption.

I broke out the function that runs if the query is a success here:

function successFunction(servResponse){
        $('#content').load('resultsPage.html #content');
        var newContent = '';
        for(var i = 0; i < servResponse.trips.tripOption[i].length; i++){
            newContent += '<div class="results">';
            newContent += '<p>' + "Option " + (i+1) + '<br>';
            newContent += servResponse.trips.tripOption[0].saleTotal + '<br>';
            newContent += '</div>';
            }

        document.getElementById('content').innerhtml = newContent;
 }

Unfortunately, this does not write out anything to the webpage. So far I can only view the raw JSON results in the Chrome Developer's Toolbar Console.

Can someone please help identify what I need to do differently? Thanks in advance!

elzi · Accepted Answer · 2014-11-14 01:02:51Z

3

Assuming you have an element on the page with the ID of content, it should work fine, you just have a little typo

document.getElementById('content').innerhtml = newContent;

capitlize the 'HTML',

document.getElementById('content').innerHTML = newContent;

$('#content').load('resultsPage.html #content'); looks incorrect, the 1st parameter should just be a URL. Try commenting it out, for now, since you're changing it's content with the other line.

answered Nov 14, 2014 at 1:02

elzi

5,6927 gold badges39 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Quinn Over a year ago

Wow, that made a HUGE difference! For the first time I was able to print to the screen. Now my only problem is that the saleTotal still doesn't print, it says it's "undefined". I suspect this has something to do with it being in an array - any suggestions?

Quinn Over a year ago

Nevermind - I just figured it out and posted an edit to my code, I needed to add [0] after tripOption ;)

James Newton · Accepted Answer · 2014-11-14 11:57:35Z

2

Also, the 4th line should be:

for(var i = 0; i < servResponse.trips.tripOption.length; i++){

You have:

... tripOption[i].length ...

The function below should:

Create one div with the class="results"
Place several p elements inside this div, each containing a 2-line entry
Display all this inside the element with an id of "content"

Is this what you want? The CSS that you are currently applying to .results may need to be applied to .results p instead.

function successFunction(servResponse){
  var tripOption = servResponse.trips.tripOption;
  var newContent = '<div class="results">';

  for(var i = 0; i < tripOption.length; i++){
    newContent += '<p>' + "Option " + (i+1) + '<br>';
    newContent += tripOption[i].saleTotal + '<p>';
  }

  newContent += '</div>';
  document.getElementById('content').innerHTML = newContent;
}

jsFiddle

edited Nov 14, 2014 at 11:57

answered Nov 14, 2014 at 1:22

James Newton

7,16210 gold badges54 silver badges129 bronze badges

3 Comments

Quinn Over a year ago

thanks for the tip! That helped a bunch too, as I mentioned on elzi's comment, I'm still having a problem with the line to print out the saleTotal (maybe because it's in an array) - any suggestions?

Quinn Over a year ago

I figured out the problem. Sorry I can't upvote your answer, I don't have enough reputation points yet, but I really, really, REALLY appreciate the help! :)

Quinn Over a year ago

Yes, that is exactly what I was going for. Thank you!

Pranay Soni · Accepted Answer · 2014-11-14 12:24:16Z

0

   var servResponse = {
                "kind": "#tripsSearch",
                "trips": {
                  "kind": "#tripOptions",
                  "tripOption": [
                   {
                    "saleTotal": "USD294.10",
                    "id": "DMfSXrkVQGKTVQsDD5l60N004",
                   },{
                    "saleTotal": "USD333.10",
                    "id": "DMfSXrkVQGKTVQsDD5l60N002",
                   },
                   {
                    "saleTotal": "USD225.94",
                    "id": "DMfSXrkVQGKTVQsDD5l60N005",
                   }
                  ]
                 }
};

function successFunction(servResponse) {
var newContent = '';
 servResponse.trips.tripOption.forEach(function(el,index){                                              
            newContent += '<div class="results">';
            newContent += '<p>' + "Option " + (index+1) + '<br>';
            newContent += el.saleTotal  + '<br>';
            newContent += '</div>';
            console.log(el.saleTotal);
});

document.getElementById('content').innerHTML = newContent;
}

successFunction(servResponse);

Using pure javascript forEach loop 

Example Link : http://jsfiddle.net/c1wzsqaf/1/

answered Nov 14, 2014 at 12:24

Pranay Soni

1,06210 silver badges19 bronze badges

1 Comment

Quinn Over a year ago

Thanks for the pure javascript version - always good to know how to do it both ways.

Collectives™ on Stack Overflow

access nested json data from ajax call

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related