A guide to iterating through an array using only vanilla JavaScript

Question

A guide to iterating through an array using only vanilla JavaScript

I am facing an issue with populating a dropdown list depending on the value selected from another dropdown. My goal is to accomplish this using vanilla JavaScript instead of jQuery. I need the second dropdown to be populated with sample data provided below:

Sample Data:

[{"1":"ABA NORTH"},{"2":"ABA SOUTH"},{"3":"AROCHUKWU"},{"4":"BENDE"},{"5":"IKWUANO"},{"6":"ISIALA NGWA NORTH"},{"7":"ISIALA NGWA SOUTH"},{"8":"ISUIKWUATO"},{"9":"OBINGWA"},{"10":"OHAFIA"},{"11":"OSISIOMA"},{"12":"UGWUNAGBO"},{"13":"UKWA EAST"},{"14":"UKWA WEST"},{"15":"UMUAHIA NORTH"},{"16":"UMUAHIA SOUTH"},{"17":"UMU - NNEOCHI"}]

HTML:

<select name="states" id="profileapplicationform-lga_id">
<option value="">Select one</option>
</select>

JavaScript:

<script type="text/javascript">
    window.onload = function(e){
        var select = document.getElementById("profileapplicationform-state_origin_id");
        select.addEventListener('change', function(){
            // AJAX request here
            /* Implementation goes here */
            
            });
        
    }
</script>

After selecting a value in the main dropdown, although I can see the sample data in the response under the network tab, the dependent dropdown remains empty. Any help would be much appreciated.

javascript arrays

Answer 1

Answer №1

There are numerous methods available in pure javascript to achieve this task.

Upon receiving the array of data from a GET request, you can utilize a for loop to go through the data and build an extensive HTML string (htmlToInsert) containing each <option> tag with the relevant data within.

Object.entries() generates an array consisting of arrays corresponding to the enumerable string-keyed property [key, value] pairs directly found on an object.

You can then employ array destructuring assignment to extract the key and value pair.

Subsequently, you can easily insert it using Element.insertAdjacentHTML()

It is advisable, for performance considerations, to consolidate all DOM modifications into a single batch, rather than manipulating the DOM within a loop.

const data = [{"1":"ABA NORTH"},{"2":"ABA SOUTH"},{"3":"AROCHUKWU"},{"4":"BENDE"},{"5":"IKWUANO"},{"6":"ISIALA NGWA NORTH"},{"7":"ISIALA NGWA SOUTH"},{"8":"ISUIKWUATO"},{"9":"OBINGWA"},{"10":"OHAFIA"},{"11":"OSISIOMA"},{"12":"UGWUNAGBO"},{"13":"UKWA EAST"},{"14":"UKWA WEST"},{"15":"UMUAHIA NORTH"},{"16":"UMUAHIA SOUTH"},{"17":"UMU - NNEOCHI"}]


let htmlToInsert = ''

for (let i = 0; i < data.length; i++) {
  const [[key, val]] = Object.entries(data[i])
  htmlToInsert += `<option value="${key}">${val}</option>`
}


const select = document.querySelector('#profileapplicationform-lga_id')
select.insertAdjacentHTML('beforeend', htmlToInsert)

<select name="states" id="profileapplicationform-lga_id">
  <option value="">Select one</option>
</select>

Answer 2

There are numerous methods available in pure javascript to achieve this task.

Upon receiving the array of data from a GET request, you can utilize a for loop to go through the data and build an extensive HTML string (htmlToInsert) containing each <option> tag with the relevant data within.

Object.entries() generates an array consisting of arrays corresponding to the enumerable string-keyed property [key, value] pairs directly found on an object.

You can then employ array destructuring assignment to extract the key and value pair.

Subsequently, you can easily insert it using Element.insertAdjacentHTML()

It is advisable, for performance considerations, to consolidate all DOM modifications into a single batch, rather than manipulating the DOM within a loop.

const data = [{"1":"ABA NORTH"},{"2":"ABA SOUTH"},{"3":"AROCHUKWU"},{"4":"BENDE"},{"5":"IKWUANO"},{"6":"ISIALA NGWA NORTH"},{"7":"ISIALA NGWA SOUTH"},{"8":"ISUIKWUATO"},{"9":"OBINGWA"},{"10":"OHAFIA"},{"11":"OSISIOMA"},{"12":"UGWUNAGBO"},{"13":"UKWA EAST"},{"14":"UKWA WEST"},{"15":"UMUAHIA NORTH"},{"16":"UMUAHIA SOUTH"},{"17":"UMU - NNEOCHI"}]


let htmlToInsert = ''

for (let i = 0; i < data.length; i++) {
  const [[key, val]] = Object.entries(data[i])
  htmlToInsert += `<option value="${key}">${val}</option>`
}


const select = document.querySelector('#profileapplicationform-lga_id')
select.insertAdjacentHTML('beforeend', htmlToInsert)

<select name="states" id="profileapplicationform-lga_id">
  <option value="">Select one</option>
</select>

Answer 3

Answer №2

Check out this line:

html+= '<option value="' +data[i][0]+ '">' +data[i][1]+ '</option>';

You cannot access items from objects by index, but you can utilize

data[key] //returns value

This is how your code should be structured

html+= '<option value="' +Object.keys(data[i])[0]+ '">' +data[i][Object.keys(data[i])]+ '</option>';

Object.keys(data[i])[0] first fetches the keys of data[i]. Since there is only one key, you can simply grab the first element of the returned array as your key.

data[i][Object.keys(data[i])] retrieves an element. It then makes use of the data[key] property to obtain the value of that element.

Instead of using list.append(), consider using list.innerHTML += html

Answer 4

Check out this line:

html+= '<option value="' +data[i][0]+ '">' +data[i][1]+ '</option>';

You cannot access items from objects by index, but you can utilize

data[key] //returns value

This is how your code should be structured

html+= '<option value="' +Object.keys(data[i])[0]+ '">' +data[i][Object.keys(data[i])]+ '</option>';

Object.keys(data[i])[0] first fetches the keys of data[i]. Since there is only one key, you can simply grab the first element of the returned array as your key.

data[i][Object.keys(data[i])] retrieves an element. It then makes use of the data[key] property to obtain the value of that element.

Instead of using list.append(), consider using list.innerHTML += html

Answer 5

Answer №3

After reviewing your sample data more closely, it seems that using Object.entries is the best approach to access both the key and value of each object:

const info = [{"1":"ABA NORTH"},{"2":"ABA SOUTH"},{"3":"AROCHUKWU"},{"4":"BENDE"},{"5":"IKWUANO"},{"6":"ISIALA NGWA NORTH"},{"7":"ISIALA NGWA SOUTH"},{"8":"ISUIKWUATO"},{"9":"OBINGWA"},{"10":"OHAFIA"},{"11":"OSISIOMA"},{"12":"UGWUNAGBO"},{"13":"UKWA EAST"},{"14":"UKWA WEST"},{"15":"UMUAHIA NORTH"},{"16":"UMUAHIA SOUTH"},{"17":"UMU - NNEOCHI"}]

info.forEach(item => {
  for (let [key, value] of Object.entries(item)) {
    output += `<option value="${key}">${value}</option>`;
  }
});

Answer 6

After reviewing your sample data more closely, it seems that using Object.entries is the best approach to access both the key and value of each object:

const info = [{"1":"ABA NORTH"},{"2":"ABA SOUTH"},{"3":"AROCHUKWU"},{"4":"BENDE"},{"5":"IKWUANO"},{"6":"ISIALA NGWA NORTH"},{"7":"ISIALA NGWA SOUTH"},{"8":"ISUIKWUATO"},{"9":"OBINGWA"},{"10":"OHAFIA"},{"11":"OSISIOMA"},{"12":"UGWUNAGBO"},{"13":"UKWA EAST"},{"14":"UKWA WEST"},{"15":"UMUAHIA NORTH"},{"16":"UMUAHIA SOUTH"},{"17":"UMU - NNEOCHI"}]

info.forEach(item => {
  for (let [key, value] of Object.entries(item)) {
    output += `<option value="${key}">${value}</option>`;
  }
});

Answer 7

Answer №4

Is something along these lines correct? (written in pure JavaScript)

window.onload =()=>
  {
  const select     = document.getElementById("profileapplicationform-state_origin_id")
    ,   selectList = document.getElementById("profileapplicationform-lga_id")
    ;
  select.oninput =()=>
    {
    selectList.innerHTML = '<option value="">Select one</option>'
      ;
    fetch ( baseurl,  // ??
      {
      method: 'POST',
      headers: new Headers(),
      body:JSON.stringify({state_origin_id: select.value})
      })
    .then ( resp => resp.json())
    .then ( data =>
      {
      data.forEach(elm=>
        {
        let [key, val] = Object.entries(elm)[0]
        selectList.add(new Option(val,key))
        })
      })
    .catch ( err => console.log(err) )
    }
  }

Learn more about JavaScript fetch -> https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Explore new Option in JavaScript -> https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option

Any additional questions?

Answer 8

Is something along these lines correct? (written in pure JavaScript)

window.onload =()=>
  {
  const select     = document.getElementById("profileapplicationform-state_origin_id")
    ,   selectList = document.getElementById("profileapplicationform-lga_id")
    ;
  select.oninput =()=>
    {
    selectList.innerHTML = '<option value="">Select one</option>'
      ;
    fetch ( baseurl,  // ??
      {
      method: 'POST',
      headers: new Headers(),
      body:JSON.stringify({state_origin_id: select.value})
      })
    .then ( resp => resp.json())
    .then ( data =>
      {
      data.forEach(elm=>
        {
        let [key, val] = Object.entries(elm)[0]
        selectList.add(new Option(val,key))
        })
      })
    .catch ( err => console.log(err) )
    }
  }

Learn more about JavaScript fetch -> https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Explore new Option in JavaScript -> https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option

Any additional questions?

A guide to iterating through an array using only vanilla JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a hierarchical navigation menu in CodeIgniter using a single database table

Errors encountered when using Input onChange with React and TypeScript: jsx no-lambda and no-bind issues

Utilizing Angular JS to parse JSON data and showcase it in various tables

Tips for avoiding issues with double quotes when working with JavaScript and JSON

Update the withCredentials property to utilize the latest ES6 integrated HTTP request tool known as Fetch

Two jQuery event handlers with similar functionality are displaying distinct behaviors

What is the best way to reset react-id-swiper every time an event handler is triggered in a React application?

Interpret a JavaScript array response

Example code demonstrating how to include an annotation or note using Javascript

I need to figure out how to incorporate a specific feature into my personal list by leveraging Javascript

using a ternary operator within the map function

Creating hyperlinks in JSON response from a REST API with AngularJS - A guide!

Error Encountered: Nested textarea not supported in HTML

Transferring Arrays from PHP Script to JavaScript Script

What is the method for updating the value of a character using a function in JavaScript?

What is the best way to ensure TypeScript recognizes a variable as a specific type throughout the code?

I am curious about the significance of ":op?" in a URL route

Pondering in AngularJS - what is the best way to alter the DOM during an AJAX call?

Ways to set up information without altering the original

Extract the HTML content from the existing UIWebview