Я хотел бы запустить скрипт в HTML, где он генерирует некоторые элементы HTML на основе ответа, полученного от вызова API, и вставляет их во innerHTML элемента div.Проблема в том, что когда я запускаю скрипт сам по себе и console.log () в результате, я вижу, что элементы HTML успешно сгенерированы.но когда я пытаюсь запустить скрипт в HTML, он не может редактировать структуру.Вот сценарий:
const fetch = require("node-fetch");
fetch('http://localhost:5000/sampleRoute/sampleParameter')
.then(function(res){
return res.json();
})
.then(function(data){
let resultList = createResultList(data);
//console.log(resultList);
document.getElementById('sampleID').innerHTML = resultList;
});
HTML:
<div id="sampleID"></div>
<script type="text/javascript" src="sampleScript.js"></script>
Вот что происходит, если я запускаю сценарий изолированно и console.log resultList
<div>
<p>BayID: 2495</p>
<h4>Distance: 221.4507100415552</h4>
<h4>Parking Type + Disability Ext: 1P Meter</h4>
<p>Disability Extension: 120</p>
</div>
<div>
<p>BayID: 2497</p>
<h4>Distance: 228.83722816851767</h4>
<h4>Parking Type + Disability Ext: 1P Meter</h4>
<p>Disability Extension: 120</p>
</div>
<div>
<p>BayID: 2501</p>
<h4>Distance: 239.1268407711393</h4>
<h4>Parking Type + Disability Ext: 1P Meter</h4>
<p>Disability Extension: 120</p>
</div>
Итаксписок успешно сгенерирован, но когда я пытаюсь заменить innerHTML указанным списком, он не работает.Я также заметил, что попытка заменить innerHTML вне блока fetch работает отлично, поэтому, возможно, что-то не так с самой fetch?
EDIT: Вот функция createResultList, так как кто-то спросилдля него
function createResultList(data) {
let output = '';
data.forEach(function (item) {
output += createResultItem(item);
});
return output;
}
function createResultItem(item){
let columnNum = chooseColumn(item);
let features = generateFeatures(item, columnNum);
let result = `
<div>
<p>BayID: ${item.spot.BayID}</p>
<h4>Distance: ${item.distance_to_target}</h4>
<h4>Parking Type + Disability Ext: ${features.TypeDesc}</h4>
<p>Disability Extension: ${features.DisabilityExt}</p>
</div>`;
return result;
}
Все, что он делает - возвращает HTML, используя массив json, возвращенный из вызова API