Iterating over an object inside an axios.get request in vue js

Question

I'm having issues looping over an object (a json response from a get request). Is it not possible to use for ... in ... in a vue js method? or inside an axios method? Even if I replace the loop to a dummy loop like so, I get no output to my console.

fetchData(id){
  this.$Progress.start()
  axios.get(base_path+'/admin_api/testDetailByUser/'+id)
    .then(response => {
        ob ={"a":1,"b":2,"c":3}
        for (i in ob){
            console.log(ob[i]);
        }
       this.$Progress.finish()
  }).catch(error=>{
       this.$Progress.fail()
 }); 
},

The actual code looks something more like this:

export default {

        data(){
            return {
                form : new Form({
                     id             :'',
                     examiner_id    :[],
                 }),
            }
        },

        methods:{
           
            fetchData(id){
                this.$Progress.start()
                axios.get(base_path+'/admin_api/testDetailByUser/'+id)
                    .then(response => {
                        this.myData = response.data;
                        $('#detailDiv').modal('show');
                        this.form.examiner_id = []; 
                        for (property in this.myData){
                            this.form.examiner_id.push(this.myData[property].id);
                        }
                        this.$Progress.finish()
                    }).catch(error=>{
                    this.$Progress.fail()
                }); 
            },

with the following html excerpt

<form>
   <tr v-for="(mailPdf,i) in mailPdfs" :key="mailPdf.id">
     <select v-model="form.examiner_id[i]" name="examiner_id[i]"  id="examiner_id" :value="mailPdf.examiner.id">
          <option value="" disabled>choose examiner</option>
          <option :value="mailPdf.examiner.id">{{mailPdf.examiner.name}} - current examiner</option>
          <option v-for="testExaminer in filteredTestExaminer" :value="testExaminer.examiner.id">{{ testExaminer.examiner.name }}</option> 
      </select> 
   </tr>
</form>

the idea is to set the default value for the <select> input, since selected="selected" doesn't work on vuejs, but I can't feed it into data(){ because it has a new value for each individual get request.

Thanks in advance!

Answer 1

you can do that with Object. values()

your code should be like this

...

for (property in Object.values(this.myData)){
  this.form.examiner_id.push(this.myData[property].id);
}

...

or just use forEach()

...

Object.values(this.myData).forEach(item => this.form.examiner_id.push(item.id))

...