如何将来自Mongoose的JSON映射到Vue和Quasar？

Question

I have a Mongoose backend and wrote some REST APIs to supply data to my Vue/Quasar frontend. It's still basic, uses Node/Express http for the API calls, no Axios or the like yet. I got some simple CRUD get/put/post/delete APIs working, but now have a more complex one that is based on a specific Mongoose query to return me the children of a node.

Mongoose provides me the data in this format:

{“kinder”: [ {name: value, …}, {name: value, …} ] }  

which seems to be an array wrapped into an object. I couldn't figure out how to change that format on the Mongoose/backend side.

Vue and Quasar at the frontend need to consume some (not all) of these values coming in from Mongoose, but they want it as a pure array in the form of

[ {name: value, ...}, {name: value, ...} ]

And I need to insert some new name: values pairs for Quasar's use, in addition to what is coming in from the backend..

After doing my REST call from the Vue component's onLazyload method, to get the children from the backend, I can see the children perfectly in the Chrome Vue Tools, so I think the REST API call works, as designed. It works also perfectly directly through localhost:8080/api/baustoff/kinder/<_id>, delivering the children in the above format.

My problem comes in the mapping of the REST response data to what is needed by Vue/Quasar, code that is also in onLazyLoad method, after the REST call (see below).

I tried various changes to the code below, eg using JSON.parse, as suggested elsewhere, but failed. I believe the main issue is how to deal with this nested array?

Here is the code on the Vue component's side (onLazyLoad method) which is not working:

onLazyLoad({ node, key, done, fail }) {
      let parent_id = node._id; 
      // REST call to get the children of a parent node from Mongoose
      http
        .get("/baustoff/kinder/"+parent_id)
        .then(response => {
            // If no children, return empty tree array
          if (response.data == null) {
            done([]);
            return;
          }
          // Process to create Vue/Quasar QTree array with data from REST
          // PROBLEMATIC CODE STARTS PROBABLY HERE!!!!!!!!!!!!!!!
          let donvis = response.data;
          let treeNodes = []; // array to prep the children as needed by QTree 
          for (let i = 0; i < donvis.length; i++) {
                 treeNodes[i] = {
                 fachlicherTyp: donvis[i].fachlicherTyp,
                 _id: donvis[i]._id,
                 lazy: true,
                 parent_id: parent_id, 
               };    
          }
          done(treeNodes); //Draw tree by Quasar/vue QTree
          this.treeChange++; // Marking tree change to Quasar
          return null;
      })
        .catch(e => {
          console.log(e);
        });
    }, // /onLazyLoad()

The problem: The code never gets into the for loop, since donvis.length is undefined - my fault, since I'm certainly not doing this processing of the response right.

I would prefer to get a solution in the Vue code above, since I fear I will have to deal with other similar trouble situations.

I would also appreciate hints about how to better prepare the JSON output on the Mongoose side, eg get rid of the {"children:" }. The Mongoose query for it is this:

Baustoff
  .findById(req.params.baustoffId)
  .select('kinder -_id') 
  .populate('kinder','name baumKnotenTyp fachlicherTyp aktiv produkt') 
   .lean().exec ( (err, baustoff) => { callback(err, baustoff, res) })
};

Answer 1

If I understand correctly, donvis is the data from mongoose, which is an object. Objects don't have a length property

You should try this:

donvis.kinder.forEach(child => {
  treeNodes.push({
    fachlicherTyp: child.fachlicherTyp,
    _id: child._id,
    lazy: true,
    parent_id: parent_id,
  })
})

I'm using forEach because I think it makes things more readable. Tell me if you don't know how to use it.

Notice that I'm also using treeNodes.push(...) instead of treeNodes[i] = ... This is a more standard way of filling up an array