從ajax調用訪問嵌套的json數據

Question

我正在與一個API交互，該API向我返回JSON數據。 由於結果不是存儲在文件中，而是存儲在服務器內存中，因此我很難確定如何訪問數據並將其寫入html網頁。 這是我的$ .ajax調用的樣子：

        $.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"}
            });

這是我從服務器獲取的JSON的樣子：

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

我真正需要的是每個tripOption的saleTotal。

我打破了在查詢成功的情況下運行的功能：

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;
 }

不幸的是，這沒有將任何內容寫到網頁上。 到目前為止，我只能在Chrome開發者工具欄控制台中查看原始JSON結果。

有人可以幫忙確定我需要做些什么嗎？ 提前致謝！

Answer 1

假設頁面上有一個元素，其ID為content ，則它應該可以正常工作，只是有一點錯字

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

大寫“ HTML”，

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

---

$('#content').load('resultsPage.html #content'); 看起來不正確，第一個參數應該只是一個URL。 暫時將其注釋掉，因為您要更改另一行的內容。

Answer 2

另外，第四行應為：

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

你有：

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

以下功能應：

• 使用class =“ results”創建一個div
• 在此div中放置幾個​​p元素，每個元素包含2行
• 在id為“ content”的元素中顯示所有這些內容

這是你想要的嗎？ 您當前應用於.results的CSS可能需要改為應用於.results p 。

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

Answer 3

   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/