顯示來自API的搜索結果

您好，我正在嘗試創建一個應用程序來搜索食譜。我嘗試過使用Yummly API和BigOven api，但是我無法上手。顯示來自API的搜索結果

這裏是我有bigOven的代碼。我無法讓任何搜索結果出現在「結果」中。

$(function() { 
    $('#searchform').submit(function() { 
     var searchterms = $("#searchterms").val(); 
     // call our search twitter function 
     getResultsFromYouTube(searchterms); 
     return false; 
    }); 
}); 

function getResultsFromYouTube (searchterms) { 
    var apiKey = "dvxveCJB1QugC806d29k1cE6x23Nt64O"; 
     var titleKeyword = "lasagna"; 
     var url = "http://api.bigoven.com/recipes?pg=1&rpp=25&title_kw="+ searchterms + "&api_key="+apiKey; 


     $.ajax({ 
      type: "GET", 
      dataType: 'json', 
      cache: false, 
      url: url, 
      success: function (data) { 
       alert('success'); 
       console.log(data); 
       $("#results").html(data); 
      } 
     }); 
    }

任何人都可以給我說明如何做到這一點？非常感謝你。

來源

2014-04-30 user3474625

你確定你可以使用純JSON與這些API，而不僅僅是JSONP？ – jraede

我對這個領域非常非常缺乏經驗，所以不太確定。但是這正是文檔所說的： BigOven Recipe API目前支持兩種序列化格式：XML（可擴展標記語言）和JSON（JavaScript對象表示法）。請求序列化格式 API使用請求的HTTP「Accept」頭來確定返回數據的序列化格式。序列化格式\t HTTP Accept報頭 XML \t文本/ XML JSON \t應用/ JSON 實施例抓取JSON（JQUERY） – user3474625

您的請求工作並返回一個對象。 http://jsfiddle.net/jayblanchard/2E9jb/現在我們需要做的就是解析這個對象。 –

API正在返回JSON數據，而不是HTML。我檢查了API文檔，並且JSONP沒有必要。

但是，當你運行該代碼：

$('#results').html(data);

你的代碼將只是把JSON到您的HTML，而不會得到正確顯示。你沒有說是否console.log(data)正確輸出數據，但我會假設它是。

所以，你需要將你的JSON轉換爲HTML。您可以通過編程來實現，或者您可以使用模板語言。有許多選項，包括下劃線，jquery，小鬍子和把手。

我建議把手，但它不是一個簡單的代碼添加（主要困難將加載您的模板，或將其包括在您的構建中）。

http://handlebarsjs.com/

來源

2014-04-30 18:05:54

這將取決於你哪個鍵和值，你必須展現給您的用戶，並以何種方式......對於離。甚至有一個圖像鏈接，你既可以顯示圖片到你的用戶或者可能只是顯示他們的圖片鏈接...

Simple <p> structure of all the key's with there value's
的jQuery

$.each(data.Results, function (key, value) { 
    $.each(value, function (key, value) { 
     $("#result").append('<p>Key:-' + key + ' Value:-' + value + '</p>'); 
    }); 
$("#result").append('<hr/>'); 
});

來源

2014-04-30 18:30:07 Bhavik

你的ajax正在工作，你只需要解析結果。爲了讓你開始：

$.ajax({ 
    type: "GET", 
    dataType: 'json', 
    cache: false, 
    url: url, 
    success: function (data) { 

     // Parse the data: 
     var resultsString = ""; 
     for (var i in data.Results){ 
      console.log(data.Results[i]); 
      resultsString+= "<div>"+data.Results[i].Title+ " ("+data.Results[i].Cuisine+")</div>"; 
     } 
     $("#results").html(resultsString); 

    // If you want to see the raw JSON displayed on the webpage, use this instead: 
    //$("#results").html( JSON.stringify(data)); 
    } 
});

來源

2014-04-30 18:34:48

我創造了一個小遞歸函數通過JSON是迭代並吐出所有的值（我塗膠我在其他條件你輸出） -

function propertyTest(currentObject, key) { 
    for (var property in currentObject) { 
     if (typeof currentObject[property] === "object") { 
      propertyTest(currentObject[property], property); 
     } else { 
      $('#results').append(property + ' -- ' + currentObject[property] + '<br />'); 
     } 
    } 
}

然後我你的AJAX的成功之內把它叫做 -

$.ajax({ 
    type: "GET", 
    dataType: 'json', 
    cache: false, 
    url: url, 
    success: function (data) { 
     console.log(data); 
     propertyTest(data); // called the function 
    } 
});

它吐出所有的JSON數據作爲這裏看到 - http://jsfiddle.net/jayblanchard/2E9jb/3/

來源

2014-04-30 18:34:57

顯示來自API的搜索結果

回答

相關問題