Блог

Я пытаюсь извлечь данные из API, который возвращает только 100 элементов за раз и маркер на следующую страницу. В API также есть поле, содержащее общее количество элементов.

Мне трудно понять даже, с чего начать разработку этого.

Я знаю, что остальные устройства не обновляются после каждого звонка, чтобы получить маркер элемента.. что я могу сделать?

 if(remainingItemsgt;0){    getItemMarker(tkn, jsonData["PagedItemList"]["NextMarker"]["_text"]).then( result =gt; {  console.log(result);  jsonData = convertXMLtoJSON(result);  htmlResponse = htmlResponse   "lt;brgt;lt;bgt;Part 2lt;/bgt;"  htmlResponse = htmlResponse   htmlGetter(jsonData); //need to convert result before sending  return htmlResponse;  //I want to get part 3, 4..etc until I have no items left  }); //how do I ".then" over and over until I have no more items?  }  else{  return htmlResponse;  }   //I tried this    // but results in infinite loop  for(var i = 0; remainingItemsgt;0; i  ){    getItemMarker(tkn, jsonData["PagedItemList"]["NextMarker"]["_text"]).then( result =gt; {  console.log(result);  jsonData = convertXMLtoJSON(result);  htmlResponse = htmlResponse   "lt;brgt;lt;bgt;Part "   i   "lt;/bgt;";  htmlResponse = htmlResponse   htmlGetter(jsonData); //need to convert result before sending  remainingItems = remainingItems - jsonData["PagedDeviceList"]["Items"]["Item"].length;  console.log(remainingDevices);  });  }  return htmlResponse; 

Прежде всего. Он содержит только 100 предметов не просто так. Вероятно, вам следует разделить результат на «страницы», как в обычном интернет-магазине.

В любом случае, представьте, что в медленном Интернете есть миллион товаров. Вы не хотите загружать все это, а затем показывать результат. Вместо

1. загрузите его часть
2. обновите HTML-код,
3. проверьте, было ли в последнем полученном ответе 100 пунктов,
4. если это так, загрузите следующую часть, используя рекурсивный цикл.

Другими словами: обновляйте HTML, как только загружается каждый «сегмент».

Трудно показать что-то конкретное, поэтому рассматривайте это как абстрактный код:

 var part = 0;  function updateHTML(htmlResponse) { // 2  // code to update HTML, with either .innerHTML or .appendChild(); }  function downloadItems() { // 1  fetch(a_promise)  .then((result) =gt; {  let jsonData = convertXMLtoJSON(result);  let htmlResponse = `lt;brgt;lt;bgt;Part ${  i}lt;/bgt;`;  let convertedToHTML = htmlGetter(jsonData)  updateHTML(htmlResponse   convertedToHTML) // 2   if (jsonData.length == 100) { // 3  downloadItems(); // 4  }  }); }