CODEWITHSUNDEEP
jquery
user14221168
user14221168

Reputation:

How to foreach loop and append option in select box ? from jquery?

This is data when i do console.log(data.allYear).Data is coming in this form

enter image description here

And i want to append in this select form like this :

<select name="year" id="fiscal_year">
  <option>2018/2019</option>
  <option>2019/2020</option>
  <option>2021/2022</option>
  <option>2022/2023</option>
</select>

I am trying with these method but not getting result i want

 fetch('http://127.0.0.1:8000/api/filterChartData')
    .then(response => response.json())

    .then(data => {
        console.log(data.allYear)
        data.allYear.forEach(function (fiscalyear) {
            $('#fiscal_year').append('<option >' + fiscalyear + '</option>')
        })
    });

Upvotes: 1

Views: 2211

Answers (2)

Ashish Mishra
Ashish Mishra

Reputation: 422

user JSON.parse to parse the resoponse data and try

JSON.parse(data.allYear).forEach(fiscalYear => { $('#fiscal_year').append('<option>' + fiscalyear + '</option>') })

Upvotes: 1

Terry
Terry

Reputation: 66123

Since data.allYear is an object and not an array, data.allYear.forEach() will not work as you expected it to be. What you want is to use Object.keys() instead, which returns an array of keys in the object, and then chain .forEach() to it, so that you can iterate through all the keys in the object:

fetch('http://127.0.0.1:8000/api/filterChartData')
.then(response => response.json())
.then(data => {
    Object.keys(data.allYear).forEach(fiscalYear => {
        $('#fiscal_year').append('<option>' + fiscalyear + '</option>')
    });
});

Upvotes: 2

Related Questions