Vue JS get Json object list with axios

Question

I need to access this Json object

"savings": {
        "1": {
            "id": 111,
            "name": "savings A"
        },
        "2": {
            "id": 123,
            "name": "savings B"
        },
    },

to display it on a mutiselect:

<div class="form-group row">
<label class="col-sm-4 col-form-label text-right">Savings:</label>
    <div class="col-sm-6">
        <multiselect2
            v-model="savings"
            track-by="name"
            label="name"
            :options="savings_list"
            :allow-empty="false"
            :searchable="true">
         </multiselect2>
     </div>
 </div>

////
data: () => ({savings_list: [], savings: null});
////

axios.get('/api/)
        .then(response => {
    
            this.savings_list = response.data.savings;
            this.savings = this.savings_list.find(f => f.id>=0);}

I tried to declare savings as but no luck

savings_list: {array: {}}

I did this same process for other arrays and there was no issue, the problem here is I don´t know how to access this Json object using Vue. When I run the code I get this errors:

Invalid prop: type check failed for prop "options". Expected Array, got Object

[Vue warn]: Error in getter for watcher "filteredOptions": "TypeError: this.options.concat is not a function"

I've been stuck trying to fix this for hours, any help is more than welcome.

the error message is pretty clear. options expects an Array, but response.data.savings is an object — maembe
– maembe, Commented Feb 7, 2022 at 18:53
Yeah, I get that. The problem is I don't know how to convert the object into an array — Enrique Laurel
– Enrique Laurel, Commented Feb 7, 2022 at 22:57

Philipp · Accepted Answer · 2022-12-02 07:12:13Z

0

eventually you can try this

     .then(response => {
       let new_savings_list = [];
       for(saving in response.data.savings){
         new_savings_list.push(response.data.savings[saving]);
       }
       this.savings_list = new_savings_list;```

answered Dec 2, 2022 at 7:12

Philipp

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue JS get Json object list with axios

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related