Unable to set nested object value in vuex state completely

Question

I have data in database with nested object like:

[{"id":"1-368","name":"\tSolan","days":1,"daynights":2,"hotel":{"hotel_data":[{"id":1,"title":"hotel 1"}],"checkin":"","checkout":"","roomtype":""},"hotel2":{"hotel_data":[{"id":1,"title":"hotel 1"}],"checkin":"","checkout":"","roomtype":""},"specinst":"","mealplan":""},{"id":"2-54","name":"Dharamsala","days":"3","daynights":4,"hotel":{"hotel_data":[{"id":3,"title":"hotel3"}],"checkin":"","checkout":"","roomtype":""},"hotel2":{"hotel_data":[{"id":2,"title":"hotel 2"}],"checkin":"","checkout":"","roomtype":""},"specinst":"","mealplan":""}]

Now when I am trying to fetch data and try to assign to a state through mutation it get assigned incompletely like:

[{"id":"1-368","name":"\tSolan","days":1,"daynights":2,"hotel":{"hotel_data":"","checkin":"","checkout":"","roomtype":""},"hotel2":{"hotel_data":"","checkin":"","checkout":"","roomtype":""},"specinst":"","mealplan":"","date_from":"08 Jan 2020","date_to":"09 Jan 2020"},{"id":"2-54","name":"Dharamsala","days":"3","daynights":4,"hotel":{"hotel_data":"","checkin":"","checkout":"","roomtype":""},"hotel2":{"hotel_data":"","checkin":"","checkout":"","roomtype":""},"specinst":"","mealplan":"","date_from":"09 Jan 2020","date_to":"12 Jan 2020"}]

In above code you can notice hotel_data is a nested array but not able see after assigning it to vuex state.

code:

const mutations = {
setItem(state, item) {


    state.item.tour_location=JSON.parse(item.tour_location);
 }}

Answer 1

What do you see if you console.log(item.tour_location); within the setItem mutation? If the data is coming in with the correct structure, I would recommend setting up your state as a skeleton of the expected data.

For example:

Expected data: {id: 'abc', hotel: [{ prop1: '123', prop2: '234']}

Vuex state: {id: '', hotel: [{ prop1: '', prop2: '' }]}

Hope this helps.