如何將來自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] = ...這是填充數組的更標准方法