JS скрипт не запускается в HTML при использовании fetch () - PullRequest
0 голосов
/ 11 мая 2019

Я хотел бы запустить скрипт в 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...