将 JSON 值附加到搜索结果 div答案

【问题标题】：Appending JSON values to search results div将 JSON 值附加到搜索结果 div
【发布时间】：2017-04-03 00:28:26
【问题描述】：

我正在尝试将搜索查询的结果附加到 div，但得到了[object Object] 结果。如何解析这个 json 对象并仅从结果中检索/显示 title 和 permalink？

json 请求

$("#searchterm").keyup(function(e) {
 var q = $("#searchterm").val();
 //Only begin search with at least 3 characters.
 if(q.length > 3){
    ajax_search();
 }
 //Send search query
 function ajax_search(){
 $.getJSON("http://url-to-search?q=" + q, {
          dataType:'jsonp'
   },
 //Get results and make 'em look good
 function(data) {
   console.log(data);
   $("#results").empty();
   $("#results").append("Results for <b> " + q + "</b>");
     $.each(data.query.search, function(i, data) {
         $("#results").append(data);
     });
  });
 }
});

示例 json

{
    "count": 50,
    "data": [{
        "id": "/folder/bob-jones/",
        "image": "https://image-url.jpg",
        "permalink": "/folder/bob-jones/",
        "text": "lots of text description here",
        "title": "Bob Jones",
        "type": "Employee"
    }]
}

【问题讨论】：

你试过data.data[0].title和/或data.data[0].permalink吗？
data.query.search，我认为应该是 data.data 和内部函数 data.title 有人认为... $.each(data.data, function(i, data) { $("#results").append(data.title+" "+data.permalink); });
@AswinRamesh - 这行得通。如果你把它放在一个答案中，我会把它标记为正确的。
@Matt 完成... :)

标签： jquery json

【解决方案1】：

data.query.search, 我认为应该是 data.data 和内部函数 data.title 有些人认为... $.each(data.data, function(i, data) { $("#results").append(data.title+" "+data.permalink); });

【讨论】：

【解决方案2】：

编辑：

因为我没有你的 URL 来测试，所以这只是一个占位符示例：

$("#searchterm").keyup(function(e) {
 var q = $("#searchterm").val();
 //Only begin search with at least 3 characters.
 if(q.length > 3){
    ajax_search();
 }
 //Send search query
 function ajax_search(){
 $.getJSON("http://url-to-search?q=" + q, {
          dataType:'jsonp'
   },
 //Get results and make 'em look good
 function(data) {
   console.log(data);
   $("#results").empty();
   $("#results").append("Results for <b> " + q + "</b>");
     $.each(data.query.search, function(i, data) {
           alert(data.data[i].title);
     });
  });
 }
});

无论如何，与最初发布的概念相同。

https://jsfiddle.net/2kcdhbmy/2/

刚刚为您创建了一个 JSFiddle：

var data = {
    "count": 50,
    "data": [{
        "id": "/folder/bob-jones/",
        "image": "https://image-url.jpg",
        "permalink": "/folder/bob-jones/",
        "text": "lots of text description here",
        "title": "Bob Jones",
        "type": "Employee"
    }]
}

alert(data.data[0].title);

https://jsfiddle.net/2kcdhbmy/

【讨论】：

我需要能够遍历多个数据条目，而不仅仅是第一个。
修改示例。 Fiddle 也进行了修改，这只是一个示例，因为我没有要测试的 URL。