显示API的搜索结果

Display search results from API

本文关键字：搜索结果 API 显示      更新时间：2023-09-26

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

有人能告诉我怎么做吗？？非常感谢。

API返回的是JSON数据，而不是HTML。我查看了API文档，没有必要使用JSONP。

但是，当您运行以下代码时：

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

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

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

我推荐使用手柄，但这不是一个简单的代码添加(主要的困难是加载模板，或将其包含在构建中(。

http://handlebarsjs.com/

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

所有具有值的键的简单<p>结构 jQuery 

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

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

我创建了一个小的递归函数，它遍历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/

相关文章：