CODEWITHSUNDEEP
javascriptjqueryajaxjson
Quinn
Quinn

Reputation: 25

access nested json data from ajax call

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!

Upvotes: 1

Views: 647

Answers (3)

Pranay Soni
Pranay Soni

Reputation: 1066

   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/

Upvotes: 0

James Newton
James Newton

Reputation: 7092

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

Upvotes: 2

elzi
elzi

Reputation: 5672

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.

Upvotes: 3

Related Questions