使用 JS 将 HTML 中的 div 替换为 fetch() 数据

Question

I'm using fetch() to obtain data from a public API and have an array where I'm trying to store all job locations. This array is called the locations_array .

A for loop is running to generate a .card for each key found in the JSON and in this loop, I'm running locations_array.push(job_location); to add the locations to the array.

In my HTML I have a div in my select where I'm looking for the markup from JS to replace:

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

So, location__options will be replaced with the option markup I have written in my for loop JS.

Full code here:

 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>

What I've tried:

1.

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

With the above I get the console error 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);

With the above, I get the console error TypeError: Cannot read property 'insertAdjacentHTML' of null

I just want the locations to be shown as options in the select

Answer 1

You are pretty close, you just need something like this:

Change your select tag to look like this:

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

this means we can target the select tag itself, we don't need a div.

Then you can create an optionTag every iteration of the loop and append it to the select tag:

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

filterContainer.appendChild(optionTag);

Full example:

 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>