Question

你好，我正在尝试创建一个搜索食谱的应用程序。我尝试过使用Yummly API和BigOven 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);
            }
        });
    }

任何人都可以给我指示如何做到这一点？非常感谢你。

Answer 1

API返回JSON数据，而不是HTML。我查看了API文档，JSONP并不是必需的。

但是，当您运行此代码时：

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

您的代码只是将JSON放入您的HTML中，并且不会正确显示。您没有说明console.log(data)是否正确输出数据，但我认为它是。

因此，您需要将JSON转换为HTML。您可以通过编程方式执行此操作，也可以使用模板语言。有许多选项，包括下划线，jquery，胡子和把手。

我推荐使用把手，但它不是一个简单的代码添加（主要的难点是加载你的模板，或者将它包含在你的构建中）。

http://handlebarsjs.com/

Answer 2

这取决于您必须向用户显示哪些键和值以及以哪种方式显示...例如。甚至还有一个图像链接，您可以向用户显示该图像，也可以只显示图像链接...

<强> 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/>');
});

Answer 3

您的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) );
    }
});

Answer 4

我创建了一个小的递归函数，它遍历JSON并吐出所有的值（我在else条件下为你的输出提供了补充） -

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/

显示API的搜索结果

4 个答案: