使用jQuery解析JSON響應

我在處理我的一個應用程序中的JSON響應。我已成功使用jsonp建立連接。但我無法解析我的迴應。使用jQuery解析JSON響應

代碼：

<script type='text/javascript'> 
(function($) { 
var url = 'http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json'; 

$.ajax({ 
    type: 'GET', 
    url: url, 
    async: false, 
    jsonpCallback: 'callback', 
    contentType: "application/json", 
    dataType: 'jsonp', 
    success: function(json) { 
     console.log(json.topics); 
     $("#nav").html('<a href="">'+json.topics+"</a>"); 
    }, 
    error: function(e) { 
     console.log(e.message); 
    } 
}); 

})(jQuery); 
</script>

輸出我越來越：

[object Object],[object Object],[object Object]

響應示例：

callback({"topics":[{"name":"topic","content":[{"link_text":"link","link_src":"http://www.foodnetwork.com/"},{"link_text":"link","link_src":"http://www.hgtv.com/"},{"link_text":"link","link_src":"http://www.diynetwork.com/"},{"link_text":"link","link_src":"http://www.cookingchanel.com/"},{"link_text":"link","link_src":"http://www.travelchannel.com/"},{"link_text":"link","link_src":"http://www.food.com/"}]},{"name":"topic2","content":[{"link_text":"link","link_src":"http://www.google.com/"},{"link_text":"link","link_src":"http://www.yahoo.com/"},{"link_text":"link","link_src":"http://www.aol.com/"},{"link_text":"link","link_src":"http://www.msn.com/"},{"link_text":"link","link_src":"http://www.facebook.com/"},{"link_text":"link","link_src":"http://www.twitter.com/"}]},{"name":"topic3","content":[{"link_text":"link","link_src":"http://www.a.com/"},{"link_text":"link","link_src":"http://www.b.com/"},{"link_text":"link","link_src":"http://www.c.com/"},{"link_text":"link","link_src":"http://www.d.com/"},{"link_text":"link","link_src":"http://www.e.com/"},{"link_text":"link","link_src":"http://www.f.com/"}]}]});

我想要的形式：

主題：鏈接

來源

2013-06-28 Radhakrishna Rayidi

讓這個嘗試：

success: function(json) { 
    console.log(JSON.stringify(json.topics)); 
    $.each(json.topics, function(idx, topic){ 
    $("#nav").html('<a href="' + topic.link_src + '">' + topic.link_text + "</a>"); 
    }); 
},

來源

2013-06-28 11:59:45 Aguardientico

工作就像一個魅力:) –

它的偉大工程，謝謝 – fthopkins

我收到這類迴應 '[{ID：1，留言：「sdfsdf」，message_for： 1，message_by：2，created_at：「2015-08-29 08:22:02」，...}，...]'沒有像問題中指定的主題那樣的變量。 –

由JSON返回的數據是JSON格式：它是簡單值的陣列。這就是爲什麼你看到[對象對象]，[對象對象]，[對象對象]。

你必須迭代該值才能獲得真正的價值。像下面

jQuery提供$。每（）進行迭代，所以你也可以這樣做：

$.getJSON("url_with_json_here", function(data){ 
    $.each(data, function (linktext, link) { 
     console.log(linktext); 
     console.log(link); 
    }); 
});

現在只需使用這些信息創建一個超鏈接。

來源

2013-06-28 12:02:23

沒有工作...... :( –

原始問題是解析主題列表，但是從原始示例開始，讓函數返回單個值也可能有用。爲此，下面是一個例子（單向）做到這一點：

<script type='text/javascript'> 
    function getSingleValueUsingJQuery() { 
     var value = ""; 
     var url = "rest/endpointName/" + document.getElementById('someJSPFieldName').value; 
     jQuery.ajax({ 
     type: 'GET', 
     url: url, 
     async: false, 
     contentType: "application/json", 
     dataType: 'json', 
     success: function(json) { 
      console.log(json.value); // needs to match the payload (i.e. json must have {value: "foo"} 
      value = json.value; 
     }, 
     error: function(e) { 
      console.log("jQuery error message = "+e.message); 
     } 
     }); 
     return value; 
    } 
    </script>

來源

2015-01-19 18:26:05

試試波紋管代碼。這有助於你的代碼。

$("#btnUpdate").on("click", function() { 
      //alert("Alert Test"); 
      var url = 'http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json'; 
      $.ajax({ 
       type: "GET", 
       url: url, 
       data: "{}", 
       dataType: "json", 
       contentType: "application/json; charset=utf-8", 
       success: function (result) { 
        debugger; 

        $.each(result.callback, function (index, value) { 
         alert(index + ': ' + value.Name); 
        }); 
       }, 
       failure: function (result) { alert('Fail'); } 
      }); 
     });

我無法訪問您的網址。波紋管錯誤顯示

XMLHttpRequest無法加載http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json。對預檢請求的響應不會通過訪問控制檢查：請求的資源上不存在「訪問控制 - 允許來源」標頭。因此不允許訪問原產地'http://localhost:19829'。響應有HTTP狀態代碼501

來源

2016-10-03 06:39:19 muthukumar

jQuery.ajax({ 
      type: 'GET', 
      url: "../struktur2/load.php", 
      async: false, 
      contentType: "application/json", 
      dataType: 'json', 
      success: function(json) { 
       items = json; 
      }, 
      error: function(e) { 
       console.log("jQuery error message = "+e.message); 
      } 
     });

來源

2017-02-18 15:25:45 mobuhai

有些解釋會有幫助。 –

我掛了谷歌，後來我發現你的問題，這是非常簡單的解析JSON響應轉換成普通的HTML。只要使用這個小的JavaScript代碼：

<!DOCTYPE html> 
<html> 
<body> 

<h2>Create Object from JSON String</h2> 

<p id="demo"></p> 

<script> 

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}'); 
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; 

</script> 

</body> 
</html>

來源

2017-08-02 05:14:41

使用jQuery解析JSON響應

回答

相關問題