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

Posted 2023-03-10

【中文标题】如何将来自 Mongoose 的 JSON 映射到 Vue 和 Quasar？

【英文标题】：How to map JSON coming from Mongoose to Vue and Quasar?

【发布时间】：2019-12-11 09:19:21

【问题描述】：

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

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

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

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

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

[ name: value, ..., name: value, ... ]

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

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

我的问题在于将 REST 响应数据映射到 Vue/Quasar 所需的数据，该代码也在 onLazyLoad 方法中，在 REST 调用之后（见下文）。

我尝试对下面的代码进行各种更改，例如使用 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) )
;

【参考方案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] = ... 这是填充数组的更标准方法

【讨论】：

谢谢@bastien girschig。完美运行。你拯救了我的夜晚。我已将“儿童”编辑为“更友善”，因为我之前在原始帖子中已对其进行了编辑。它是 Mongoose 填充对象的属性的原始名称。