如何创建一个自动的html输入文本字段，以显示从API提取的值？

Question

我想构建一个输入文本字段，单击该字段将显示通过内容API获取的值的列表。 到达forEach循环时，该代码似乎不起作用。 直到initArray都可以正常工作。 forEach循环似乎不起作用。 我在initArray的console.log中看到了所有数据。

我想念什么吗？

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title> URL Builder </title> <link rel="stylesheet" href="https://contentful.github.io/ui-extensions-sdk/cf-extension.css"> <script src="https://unpkg.com/contentful-ui-extensions-sdk@3"></script> </head> <body> <form id="urlSearchContainer"> <div class="cf-form-field"> <input list="urlDataList" type="search" placeholder="Type your url here..." id="urlBuilder" class="cf-form-input"> <datalist id="urlDataList"> </datalist> </div> </form> <script> "use strict" window.contentfulExtension.init(function(api) { api.window.startAutoResizer(); // Set variables var urlDataList = document.getElementById("urlDataList"); var urlInput = document.getElementById("urlBuilder"); function getUrlData(){ //api.space.getEntries({'content_type[ne]': 'page-MBH'}) var urlDataArray = []; api.space.getEntries() .then(function (entries) { entries.items.forEach(function (entry) { if(entry.fields.url){ var urlData = entry.fields.url.en urlDataArray.push(urlData); //console.log('urldata', urlDataArray); } }) }) return urlDataArray; }; function createUrlDropdown(){ // Init data obj var data = getUrlData(); var initArray = typeof data === 'object' && data instanceof Array && data.length > -1 ? data : []; console.log('ARRAY:: ', initArray); //Create and append url data list initArray.forEach(function(item) { console.log('item:: ', item); //Create a new <option> element. var option = document.createElement('option'); console.log('option', option); option.value = item; console.log('value', option); // Add the <option> element to the <datalist>. urlDataList.appendChild(option); }); for(i = 0; i < initArray.length; i++) { console.log('obj'); var option = document.createElement("option"); option.value = initArray[i]; urlDataList.appendChild(option); } } document.getElementById("urlBuilder").addEventListener("click", function(){ createUrlDropdown(); }); }); </script> </body> </html>

任何帮助表示赞赏！

Answer 1

👋🏻

问题出在getUrlData函数中。 api.space.getEntries返回您可以正确使用then的promise。 尽管承诺是异步的（就像javascript中的很多东西一样），但是它们的承诺是一样的。

意思是您初始化urlDataArray并进行urlDataArray的调用。 当调用返回时，您将填充此数组。 问题是尽管getUrlData已经返回了一个空数组。

    function getUrlData(){
      var urlDataArray = [];
      api.space.getEntries()
      .then(function (entries) {
        // this part is executed async
        entries.items.forEach(function (entry) {
          if(entry.fields.url){
            var urlData = entry.fields.url.en
            urlDataArray.push(urlData);
          }
        })
    })
      return urlDataArray;
    };

解决此IMO的最佳方法是更改getUrlData并返回诺言。

function getUrlData() {
  // return this promise
  return api.space.getEntries()
    .then(function(entries) {
      // there is no need for another array
      // you can use map to grab the data you need
      return entries.items.map(function(item) {
        // map all the entries to the url strings
        return item.fields.url.en;
      })
    })
}

getUrlData()
  // only execute this when the data is there
  .then(function(urls) { console.log(urls); })

您的代码在UI扩展中运行，但我也很快在codepen中更改了您的代码。 它使用内容CDA，但原理保持不变。

希望能有所帮助。 :)

如何创建一个自动的html输入文本字段，以显示从API提取的值？

问题描述

1 个解决方案

解决方案1
0 2018-09-07 08:46:24

如何创建一个自动的html输入文本字段，以显示从API提取的值？

问题描述

1 个解决方案

解决方案1 0 2018-09-07 08:46:24

解决方案1
0 2018-09-07 08:46:24