使用 JS 將 HTML 中的 div 替換為 fetch() 數據

Question

我正在使用fetch()從公共 API 獲取數據，並有一個數組用於存儲所有工作位置。 該數組稱為locations_array 。

一個for loop正在運行，為 JSON 中的每個key生成一個.card ，在這個循環中，我正在運行locations_array.push(job_location); 將位置添加到數組中。

在我的 HTML 我的select中有一個div ，我正在尋找來自 JS 的標記來替換：

<select>
   <option value="">OPEN POSITIONS</option>
   <div id="location__options"></div>
</select>  

因此， location__options將替換為我在 for loop JS 中編寫的option標記。

完整代碼在這里：

 fetch('https://boards-api.greenhouse.io/v1/boards/cutover/jobs?content=true', {}).then(function (response) { return response.json(); // response type (json) }).then(function (data) { appendDataToHTML(data); // function that appends data to HTML }).catch(function (err) { console.log(err); }); function appendDataToHTML(data) { const filterContainer = document.getElementById("location__options"); const mainContainer = document.getElementById("jobListing"); // for each object, create card var locations_array = []; for (var i = 0; i < Object.keys(data.jobs).length; i++) { const job_title = data.jobs[i].title; const job_location = data.jobs[i].location.name; locations_array.push(job_location); console.log(locations_array[i]); const html = '<div class="card">'+ '<div class="card__body--title">'+ '<span class="jobTitle">' + job_title + '</span><br>' + '<span class="jobLocation">' + job_location + '</span>' + '</div>' + '</div>'; // const filter_html = '<option>' + locations_array [i]+ '</option>'; // document.getElementById("location__options").innerHTML = "<option>" + locations_array [i]+ "</option>"; mainContainer.insertAdjacentHTML('beforeend', html); } }

 select, .card{ margin-bottom: 30px; }

 <div class="row"> <div class="workable__filters"> <div class="workable__select"> <select> <option value="">OPEN POSITIONS</option> <div id="location__options"></div> </select> </div> </div> </div> <div class="row"> <div id="jobListing"></div> </div>

我試過的：

1.

document.getElementById("location__options").innerHTML = "<option>" + locations_array [i]+ "</option>";

有了上面我得到控制台錯誤TypeError: Cannot set property 'innerHTML' of null

2.

const filterContainer = document.getElementById("location__options");
const filter_html = '<option>' + locations_array [i]+ '</option>';
filterContainer.insertAdjacentHTML('beforeend', filter_html);

有了上面，我得到控制台錯誤TypeError: Cannot read property 'insertAdjacentHTML' of null

我只想將位置顯示為select中的options

Answer 1

你非常接近，你只需要這樣的東西：

將您的 select 標簽更改為如下所示：

<select id="location__options">
    <option value="">OPEN POSITIONS</option>
</select>

這意味着我們可以定位 select 標簽本身，我們不需要 div。

然后，您可以在循環的每次迭代中創建一個 optionTag，並將 append 設置為 select 標簽：

const optionTag = document.createElement('option');
optionTag.value = job_title;
optionTag.innerHTML = job_title + " | " + job_location;

filterContainer.appendChild(optionTag);

完整示例：

 fetch('https://boards-api.greenhouse.io/v1/boards/cutover/jobs?content=true', {}).then(function (response) { return response.json(); // response type (json) }).then(function (data) { appendDataToHTML(data); // function that appends data to HTML }).catch(function (err) { console.log(err); }); function appendDataToHTML(data) { const filterContainer = document.getElementById("location__options"); const mainContainer = document.getElementById("jobListing"); // for each object, create card var locations_array = []; for (var i = 0; i < Object.keys(data.jobs).length; i++) { const job_title = data.jobs[i].title; const job_location = data.jobs[i].location.name; locations_array.push(job_location); console.log(locations_array[i]); const html = '<div class="card">'+ '<div class="card__body--title">'+ '<span class="jobTitle">' + job_title + '</span><br>' + '<span class="jobLocation">' + job_location + '</span>' + '</div>' + '</div>'; // const filter_html = '<option>' + locations_array [i]+ '</option>'; // document.getElementById("location__options").innerHTML = "<option>" + locations_array [i]+ "</option>"; const optionTag = document.createElement('option'); optionTag.value = job_title; optionTag.innerHTML = job_title + " | " + job_location; filterContainer.appendChild(optionTag); mainContainer.insertAdjacentHTML('beforeend', html); } }

 select, .card{ margin-bottom: 30px; }

 <div class="row"> <div class="workable__filters"> <div class="workable__select"> <select id="location__options"> <option value="">OPEN POSITIONS</option> </select> </div> </div> </div> <div class="row"> <div id="jobListing"></div> </div>