如何在 table 中显示外部 API 搜索结果？

Question

我是最后一年的学生，正在为我的主要项目创建一个食物日志 Web 应用程序。我创建了一个搜索功能，允许我搜索和显示外部 API 结果，但现在我想在 table 中显示它们，有人可以帮忙吗？我希望它是可以过滤的 table，例如，排序的列 ascending/descending?

谢谢

function get foodItem(userInput) {
    var storedSearchItem;
    $('.resultContainer').html('');
    $.ajax({
        type: 'GET',
        async: false,
        url: 'https://api.nutritionix.com/v1_1/search/'+userInput+'?'+
        'fields=item_name%2Citem_id%2Cbrand_name%2Cnf_calories%2Cnf_total_fat&appId=325062a4&appKey=bf1a30b2066602dc6f33db888cd53bd3',
        success: function(d) {
            storedSearchItem = d.hits;
        }
    });

storedSearchItem.map(function(item) {
        var x = item.fields
        $('.resultContainer').append(
            '<div class="itemBar">'+
                '<h2>' + x.item_name + '<h2>' +
                '<h3>Calories: ' + x.nf_calories + '<h3>' +
                '<h3>Serving Size: ' + x.nf_serving_size_qty + ' ' + x.nf_serving_size_unit +'<h3>' +
                '<h3>Total Fat: ' + x.nf_total_fat + '<h3>' +
            '</div>'
            );
    });
}//ends get result function

function searchValue() {
    var formVal = document.getElementById('itemSearch').value; //value from search bar
    getFoodItem(formVal);
}

$('#searchForm').submit(function(e) {
    e.preventDefault();
});`

Answer 1

您需要在成功函数

中附加您的 table

你的代码看起来像这样

 success: function(d) {
            storedSearchItem = d.hits;
storedSearchItem.map(function(item) {
        var x = item.fields
        $('.resultContainer').append(
            '<div class="itemBar">'+
                '<h2>' + x.item_name + '<h2>' +
                '<h3>Calories: ' + x.nf_calories + '<h3>' +
                '<h3>Serving Size: ' + x.nf_serving_size_qty + ' ' + x.nf_serving_size_unit +'<h3>' +
                '<h3>Total Fat: ' + x.nf_total_fat + '<h3>' +
            '</div>'
            );
    });
        }

如何在 table 中显示外部 API 搜索结果？

How do I display external API search results in a table?

html

javascript

php

api

external