[英]HTML/Javascript - How to display text from input field as HTML code?
[英]How to create an automated html input text field that will display values being fetched from an API?
我想構建一個輸入文本字段,單擊該字段將顯示通過內容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>
任何幫助表示贊賞!
👋🏻
問題出在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,但原理保持不變。
希望能有所幫助。 :)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.