显示来自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的搜索结果

回答

相关问题