Question

我是最后一年的学生，正在为我的主要项目创建食物日志Web应用程序。我创建了一个搜索功能，允许我搜索和显示外部API结果，但现在我希望将它们显示在一个表格中，任何人都可以帮忙吗？我更喜欢它是否是一个可以过滤的表，例如，列按升序/降序排列？

由于

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

您需要将表附加到成功函数

中

您的代码看起来像这样

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

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

1 个答案: