jQuery append with api call

Question

Новое в javascript и jQuery, и у меня есть вопрос.

Я пытаюсь создать простую форму заказа с различными категориями и статьями. Категории и статьи вызывается из веб-сервиса RESTful.

Это то, что я получил до сих пор. Первый вызов апи получить все в категории:

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

Здесь я застрял. Последняя инструкция проходит через все контейнеры, добавляет новый html. Если я делаю это с <p>test</p>, он работает так, как ожидалось.

Но я хочу получить HTML-код с другим вызовом api.

Второй апи вызов будет:

$.api.getArtItems(art_category, getToken('user'), getToken('token'), function(response) { 
    builditemlist(response); 
}); 

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

Но как я могу получить вызов апи и создание HTML в Дописывать? И фактический art_category действительно должен быть передан на вызов api?

Answer 1

Это асинхронные вызовы внутри асинхронного вызова, поэтому цикл создания немного сложнее. Ниже приведен пример того, как я это сделаю. Я не тестировал его, поэтому вам может потребоваться исправить небольшие ошибки, однако общий подход должен работать. Я думаю, что у меня есть имена функций, так что легко понять, что происходит.

Две другие советы:

• Убедитесь, что вы ловите ошибки и сообщить пользователю, что что-то пошло не так. Пример кода в комментариях.
• Лучше отображать категории только после их создания, поэтому любые состояния отображения, связанные с успешным запросом, должны быть в асинхронном обратном вызове.

Код:

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