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

Question

我有一个 Mongoose 后端并编写了一些 REST APIs 来为我的 Vue/Quasar 前端提供数据。它仍然是基本的，使用 Node/Express http 进行 API 调用，还没有 Axios 等。我有一些简单的 CRUD get/put/post/delete API 工作，但现在有一个更复杂的，它基于特定的 Mongoose 查询 return 我的 children 一个节点。

Mongoose 以这种格式向我提供数据：

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

这似乎是一个包裹在 object 中的数组。我不知道如何在 Mongoose/backend 端更改该格式。

前端的 Vue 和 Quasar 需要使用来自 Mongoose 的这些值中的一些（不是全部），但他们希望它是

形式的纯数组

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

我需要插入一些新的名称：值对供 Quasar 使用，此外还有来自后端的内容..

从 Vue 组件的 onLazyload 方法执行我的 REST 调用后，为了从后端获取 children，我可以在 Chrome Vue 工具中完美地看到 children，所以我认为 REST API 调用按设计工作。它也可以直接通过 localhost:8080/api/baustoff/kinder/<_id> 完美运行，以上述格式提供 children。

我的问题在于将 REST 响应数据映射到 Vue/Quasar 所需的内容，代码也在 REST 调用之后的 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:" }。它的 Mongoose 查询是这样的：

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就是mongoose的数据，是一个对象。对象没有长度属性

你应该试试这个：

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

我正在使用 forEach，因为我认为它使事情更具可读性。如果你不知道如何使用它，请告诉我。

请注意，我还使用 treeNodes.push(...) 而不是 treeNodes[i] = ... 这是填充数组的更标准方法

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

How to map JSON coming from Mongoose to Vue and Quasar?

javascript

json

mongoose

vue.js

quasar-framework