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

Question

我有一个Mongoose后端，并编写了一些REST API将数据提供给我的Vue / Quasar前端。 它仍然是基本的，使用Node / Express http进行API调用，还没有Axios等。 我得到了一些简单的CRUD get / put / post / delete API，但是现在有一个更复杂的API，它基于特定的Mongoose查询向我返回节点的子代。

猫鼬以以下格式向我提供数据：

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

这似乎是包装在对象中的数组。 我不知道如何在Mongoose /后端更改该格式。

前端的Vue和Quasar需要消耗一些（不是全部）来自Mongoose的值，但他们希望将其作为纯数组，形式为

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

而且我需要插入一些新名称：除了来自后端的内容外，还需要Quasar使用的值对。

在通过Vue组件的onLazyload方法执行REST调用之后，为了从后端获取子级，我可以在Chrome Vue Tools中完美地看到这些子级，因此我认为REST API调用按设计工作。 它也可以直接通过localhost：8080 / api / baustoff / kinder / <_ id>完美地工作，以上述格式交付子级。

我的问题来自REST调用后，REST响应数据到Vue / Quasar所需的映射，该代码也在onLazyLoad方法中。

我尝试对下面的代码进行各种更改，例如使用JSON.parse（如在其他地方建议的那样），但失败了。 我相信主要问题是如何处理此嵌套数组？

这是不起作用的Vue组件一侧的代码（onLazyLoad方法）：

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()

问题：代码从未进入for循环，因为donvis.length是未定义的-这是我的错，因为我当然没有对响应的正确处理。

我宁愿在上面的Vue代码中获得解决方案，因为我担心我将不得不处理其他类似的麻烦情况。

我还希望获得有关如何在Mongoose端更好地准备JSON输出的提示，例如，摆脱{“ children：”}。 猫鼬查询是这样的：

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

如果我理解正确，donvis是来自猫鼬的数据，这是一个对象。 对象没有length属性

您应该尝试这样：

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

我之所以使用forEach，是因为我认为它使内容更具可读性。 告诉我您是否不知道如何使用它。

请注意，我也在使用treeNodes.push（...）代替treeNodes [i] = ...这是填充数组的更标准方法