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

我與一個將JSON數據返回給我的API接口。由於結果並不存儲在文件中，而是存儲在服務器內存中，所以我很難弄清楚如何訪問數據並將其寫入到我的html網頁。這裏是我的$就調用看起來是這樣的：從ajax調用訪問嵌套的json數據

 $.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", 
    } 
    ] 
} 
}

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

爆發後運行，如果查詢是這裏的成功的功能：

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結果。

有人可以幫助確定我需要做什麼不同嗎？在此先感謝！

來源

2014-11-14 Quinn

假設你有一個的content的ID在頁面上的元素，它應該工作正常，你只要有一點點錯字

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

capitlize的 'HTML'，

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

$('#content').load('resultsPage.html #content');看起來不正確，第一個參數應該只是一個URL。現在嘗試對它進行評論，因爲您正在改變它與另一行的內容。

來源

2014-11-14 01:02:51 elzi

哇，作出了巨大的差異！這是我第一次能夠在屏幕上打印。現在我唯一的問題是saleTotal仍然不打印，它說它是「未定義的」。我懷疑這與它在數組中有什麼關係 - 有什麼建議？ – Quinn

沒關係 - 我只是想通了，併發布了一個編輯到我的代碼，我需要在tripOption後添加[0];） – Quinn

此外，4號線應該是：

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

您有：

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

了以下功能應該：

與類創建一個DIV = 「結果」
在這個div內放置幾個p元素，每個元素包含一個2行條目
顯示這一切的元素中與「內容」

一個id這是你想要的嗎？您正在應用到.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

來源

2014-11-14 01:22:48

感謝您的提示！這也幫助了一大堆，正如我在elzi的評論中提到的，我仍然在打印出saleTotal（可能是因爲它在數組中）的問題上存在問題 - 有什麼建議嗎？ – Quinn

我想出了問題。對不起，我不能滿足你的答案，我還沒有足夠的聲望點，但我真的真的非常感謝你的幫助！ :) – Quinn

是的，那正是我所要做的。謝謝！ – Quinn

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/

來源

2014-11-14 12:24:16

感謝您的純JavaScript版本 - 總是很好的知道如何做到這一點。 – Quinn

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

回答

相關問題