How do I create a methods that map my JSON object to set properties of data object in vue.js?

Question

I using Vue.js for my frontend, and I'd like to map my JSON object to set some properties in my data().

I know the server connection works, and that it gets a proper JSON object.

In my computed() I have some logic that is supposed to map all items from the JSON object and set the property-values of it. Then sort them alphabetically, and return it to the view to display.

Can't seem to find anything that explains this here on StackOverflow.

Then I read some stuff on the Vue docs about the Vue.set, but I don't know how to implement it in my case: https://v2.vuejs.org/v2/api/#Vue-set

data: function() {
    return {
      itemListModel: {
        className: "myStuff",
        items: [],
        name: "",
        id: "",
        description: "" 
      }
    }
  },
  
  methods: {
    mapToModel: model => {
      return model.items.map(element => {
        return {
          className: model.className,
          value: element.items,
          id: element.id,
          name: element.name,
          description: element.description
        };
      });
    },
    getAllItemsFromDb() {
      const url = "https://localhost:44339/ListAll";
      axios
        .get(url, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          this.itemListModel = response.data;
        });
    },
    
    computed: {
      categorizedItems() {
        let allItems = this.mapToModel(this.itemListModel);
        alert(allItems);

        //code continues for other logic
      },
      itemResultsFromDB: function() {
        let vm = this;
        return vm.wordListModel;
        //this gets the JSON Object from the database and sets the itemListModel if it is an empty object. The class name, items, name, id and description are in the JSON object from the backend that I'd like to access.

      }

JSON object looks like this:

{"myStuff":[{"name": "foo", "id": "guid-string", "description": "blah,blah..."}]}

"Error, cannot read property of 'map' of undefined at VueComponent.mapToModel"

How do I solve this?

When I edit my itemListModel to just {} I still have the same error

Answer 1

I think you have problem in mapping database data. The structure is different

Your data

{"myStuff":[{"name": "foo", "id": "guid-string", "description": "blah,blah..."}]}

your object

   return {
      itemListModel: {
        className: "myStuff",
        items: [],
        name: "",
        id: "",
        description: ""
      }
    }

When get data from database, you should map it correctlly

      const key = Object.keys(response.data) // key here is `myStuff`
      this.itemListModel = {
        items: response.data[key],
        className: key
      }