Javascript jQuery附加api调用

刚接触javascript和jQuery，我有一个问题

我试图用不同的类别和文章制作一个简单的订单。类别和文章是从RESTful Web服务调用的

这就是我目前得到的。第一个api调用获取所有类别：

function createform() {
var dateval = '';
dateval += $("#dedate").val();

$.api.getArtCategories(dateval, getToken('user'), getToken('token'), function(response) {
    buildOrderform(response);
});

$('#orderform').show();
$("#ordersubmit").removeClass("disabled");
}

buildOrderform函数创建html：

function buildOrderform(json) {
//create categories
var html = '';
json.forEach(function (entry) {
    var art_category = entry.art_category;
    html += '<div class="row form-group categorycontainer">';
    html += '<div class="col-md-8 categoryheader">';
    html += '<h3>' + art_category + '</h3>';
    html += '</div>';
    html += '</div>';
});

$("#orderlist").html(html);

//append articles to the categories
$(".categorycontainer").append("API-Call");
}

buildItemlist是这样的：

function builditemlist(json) {
var item = '';
json.forEach(function (entry2) {
    var art_description = entry2.art_description;
    var art_id = entry2.art_id;
    var art_name = entry2.art_name;
    var art_price = entry2.art_price;
    item += '<div class="row form-group">';
    item += '<div class="col-md-8"><b>' + art_name + '</b><br>' + art_description + '</div>';
    item += '<div class="col-md-2">' + art_price + '</div>';
    item += '<div class="col-md-2"><input class="form-control article" id="' + art_id + '" type="text"/></div>';
    item += '</div>';

});
return item;
//$("#orderlist").html(item);
}

函数builditemlist（json）{
var项目=“”；
forEach（函数（entry2）{
var art_description=entry2.art_description；
var art_id=entry2.art_id；
var art_name=entry2.art_name；
var艺术品价格=entry2.艺术品价格；
项目+=''；
项目+=''+艺术名称+'
'+艺术描述+''；
物品+=''+艺术品价格+''；
项目+=''；
项目+=''；
});
退货项目；
//$（“#订单列表”）.html（项目）；
}

---

但是，如何将api调用和html创建放到append中呢？而实际的

art\u类别

必须传递给api调用吗？

这些是异步调用中的异步调用，因此创建循环有点复杂。下面是我将如何做的一个例子。我还没有测试过它，所以您可能需要修复一些小错误，不过一般的方法应该是可行的。 我想我有函数的名称，这样就很容易理解发生了什么

另外两个小贴士：

• 确保捕捉到错误并告诉用户出了问题。示例代码在注释中
• 最好只在创建类别之后显示它们，因此与成功请求相关的任何显示状态都应该在异步回调中

代码：

函数createform（）{
var dateval=''；
dateval+=$（“#dedate”）.val（）；
$.api.getArtCategories（dateval、getToken（'user'）、getToken（'token'）、函数（re）{
//应该处理错误
//例如，如果（重复错误）{}
buildCategories（re，function（err，categories）{//将在创建每个类别的所有列表项后调用
如果（错误）{
//向用户显示错误，请参见生成类别中的注释
}
否则{
$（“#订单列表”）.empty（）.append（类别）；
$（'#orderform'）.show（）；
$（“#ordersubmit”）.removeClass（“禁用”）；
}
});
});
}
函数构建类别（类别、回调）{
var类别项目=[]；
var requestNexCategoryContent=函数（）{
如果（categories.length==0）{
回调（null，categoryItems）
}
否则{
var category=categories.shift（）
，categoryItem=buildCategoryItem（类别）
;
$.api.getArtItems（category.art_category、getToken（'user'）、getToken（'token'）、函数（re）{
//也应该抓住她
//例如，if（re.error）{callback（err，null）；return；}
categoryItem.append（buildItemsForCategory（re））；
categoryItems.push（categoryItem）
requestNextCategoryContent（）；
});
}
}
requestNextCategoryContent（）；
}
函数buildCategoryItem（数据）{
var项目=“”；
项目+=''；
项目+=''+数据。艺术类别+''；
项目+=''；
项目+=''；
返回$（项目）；
}
函数buildItemsForCategory（列表）{
返回列表.map（函数（i，数据）{
var项目=“”；
item+=''+data.art\u name+'
'+data.art\u description n+''；
项目+=''+数据.艺术品价格+''；
项目+=''；
项目+=''；
退货项目；
});
}

$（“#订单列表”）.html（builditemlist（response）

API调用是异步的，因此它将无法返回到append方法。最好将追加放在

builditemlist

.Thx中。这个异步的东西让麻省理工学院感到困惑。。。我遇到的一个问题是

$.api。getArtItems

的第一个参数是必须传递的类别。没问题，我已经在

requestNextCategory

中编辑了我的代码。请注意，我现在保留category数据对象，并在

$.api.getArtItems

中使用它的

art_category

属性。顺便说一句，不确定您是否也掌握了后端api的开发。理想情况下，API会在调用时返回所需的数据，来自浏览器的连续调用有点昂贵，这取决于您有多少类别。

function builditemlist(json) {
var item = '';
json.forEach(function (entry2) {
    var art_description = entry2.art_description;
    var art_id = entry2.art_id;
    var art_name = entry2.art_name;
    var art_price = entry2.art_price;
    item += '<div class="row form-group">';
    item += '<div class="col-md-8"><b>' + art_name + '</b><br>' + art_description + '</div>';
    item += '<div class="col-md-2">' + art_price + '</div>';
    item += '<div class="col-md-2"><input class="form-control article" id="' + art_id + '" type="text"/></div>';
    item += '</div>';

});
return item;
//$("#orderlist").html(item);
}

function createform() {
    var dateval = '';
    dateval += $("#dedate").val();

    $.api.getArtCategories(dateval, getToken('user'), getToken('token'), function(re) {
        //should handle error
        // e.g. if(re.error){   }
        buildCategories(re,function(err,categories){ //will be called after all list items for each category are created
            if(err){
            //display error to user, see comment in build Categories
            }
            else{
                $("#orderlist").empty().append( categories );
                $('#orderform').show();
                $("#ordersubmit").removeClass("disabled");
             }
        });

    });

}

function buildCategories(categories,callback){

    var categoryItems = [];

    var requestNexCategoryContent = function(){
        if(categories.length ===0){
            callback(null,categoryItems)
        }
        else{
            var category = categories.shift()
                ,categoryItem = buildCategoryItem( category  )
                ;
            $.api.getArtItems(category.art_category, getToken('user'), getToken('token'), function(re) {
                //should catch errors her as well
                // e.g. if(re.error){ callback(err,null);return; }
                categoryItem.append( buildItemsForCategory( re ) );
                categoryItems.push( categoryItem )
                requestNextCategoryContent();
            });
        }

    }

    requestNextCategoryContent();

}

function buildCategoryItem(data){
    var item = '<div class="row form-group categorycontainer">';
        item += '<div class="col-md-8 categoryheader">';
        item += '<h3>' + data.art_category+ '</h3>';
        item += '</div>';
        item += '</div>';
     return $(item);
}

function buildItemsForCategory( list ){
    return list.map( function( i,data ){
        var item = '<div class="row form-group">';
            item += '<div class="col-md-8"><b>' + data.art_name + '</b><br>' + data.art_descriptionn + '</div>';
            item += '<div class="col-md-2">' + data.art_price + '</div>';
            item += '<div class="col-md-2"><input class="form-control article" id="' + data.art_id + '" type="text"/></div>';
            item += '</div>';
        return item;
    });
}