Ember.RSVP.hash給出路線

Question

EDIT模式鉤「不能轉換對象原始值」：通過進一步看，一些呼籲陣列上toString從模型鉤返回。硬編碼，這種方法工作正常，但返回像我下面，它不。

TL; DR：我操縱數據的一個陣列到一個不同的「格式」，使我可以使用灰燼圖表添加上。爲了做到這一點，我在我的路線模型鉤子中使用了Ember.RSVP，但我得到一個TypeError: Cannot convert object to primitive value，不知道爲什麼。

我一直在學習灰燼（跟着他們的快速啓動，然後超級租賃教程），現在我想建立自己的項目吧。

我遇到的問題是在我的路由的模型鉤子內處理異步操作。這可能是一個長時間的閱讀，但我試圖非常具體。但最終的問題是，我在最後得到了一個TypeError: Cannot convert object to primitive value。

我用幻影假一後端API，並返回這樣我的數據：

{ 
     "data": [ 
      { 
       "id": "May, 2017", 
       "type": "month", 
       "attributes": { 
        "label": "05/2017", 
        "value": 6 
       } 
      }, { 
       "id": "April, 2017", 
       "type": "month", 
       "attributes": { 
        "label": "04/2017", 
        "value": 5 
       } 
      }, { 
       "id": "March, 2017", 
       "type": "month", 
       "attributes": { 
        "label": "03/2017", 
        "value": 4 
       } 
      }, { 
       "id": "February, 2017", 
       "type": "month", 
       "attributes": { 
        "label": "02/2017", 
        "value": 3 
       } 
      }, { 
       "id": "January, 2017", 
       "type": "month", 
       "attributes": { 
        "label": "01/2017", 
        "value": 2 
       } 
      }, { 
       "id": "December, 2016", 
       "type": "month", 
       "attributes": { 
        "label": "12/2016", 
        "value": 1 
       } 
      } 
     ] 
    }; 

我還使用灰燼圖表從Addepar（https://github.com/Addepar/ember-charts），這需要看起來像這樣的數據（組標籤是可選的，我不使用它爲我的應用程序，但是這是從Addepar的文檔拍攝）：

[{ 
    "label": "Label 1", 
    "group": "Group One", 
    "value": 20 
}, 
{ 
    "label": "Label 2", 
    "group": "Group One", 
    "value": 22 
}, 
{ 
    "label": "Label 3", 
    "group": "Group One", 
    "value": 18 
}, 
{ 
    "label": "Label 4", 
    "group": "Group One", 
    "value": 2 
}, 
{ 
    "label": "Label 5", 
    "group": "Group One", 
    "value": 6 
}, 
{ 
    "label": "Label 1", 
    "group": "Group Two", 
    "value": 26 
}, 
{ 
    "label": "Label 2", 
    "group": "Group Two", 
    "value": 18 
}, 
{ 
    "label": "Label 3", 
    "group": "Group Two", 
    "value": 150 
}, 
{ 
    "label": "Label 4", 
    "group": "Group Two", 
    "value": 160 
}, 
{ 
    "label": "Label 5", 
    "group": "Group Two", 
    "value": 200 
}, 
{ 
    "label": "Label 1", 
    "group": "Group Three", 
    "value": 14 
}, 
{ 
    "label": "Label 2", 
    "group": "Group Three", 
    "value": 31 
}, 
{ 
    "label": "Label 3", 
    "group": "Group Three", 
    "value": 44 
}, 
{ 
    "label": "Label 4", 
    "group": "Group Three", 
    "value": 30 
}, 
{ 
    "label": "Label 5", 
    "group": "Group Three", 
    "value": 62 
}, 
{ 
    "label": "Label 1", 
    "group": "Group Four", 
    "value": 75 
}, 
{ 
    "label": "Label 2", 
    "group": "Group Four", 
    "value": 114 
}, 
{ 
    "label": "Label 3", 
    "group": "Group Four", 
    "value": 19 
}, 
{ 
    "label": "Label 4", 
    "group": "Group Four", 
    "value": 129 
}, 
{ 
    "label": "Label 5", 
    "group": "Group Four", 
    "value": 52 
}, 
{ 
    "label": "Label 1", 
    "group": "Group Five", 
    "value": 200 
}, 
{ 
    "label": "Label 2", 
    "group": "Group Five", 
    "value": 14 
}, 
{ 
    "label": "Label 3", 
    "group": "Group Five", 
    "value": 31 
}, 
{ 
    "label": "Label 4", 
    "group": "Group Five", 
    "value": 44 
}, 
{ 
    "label": "Label 5", 
    "group": "Group Five", 
    "value": 30 
}] 

基本上，因爲我正在關注的JSONAPI規格，數據我是從接收API看起來不同於需要傳入Ember Charts Vert的內容ical Bar Graph組件。

我的解決方案至今（不工作）是通過初始數據環和填充新的陣列看起來灰燼圖表需要它的方式。據我瞭解，這隻能異步發生，因爲我必須進行API調用（以及對我的商店的調用），然後在從模型鉤子返回新數組之前對結果進行操作。

下面是我現在使用的實際代碼：

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model() { 
     var results = this.get('store').findAll('month'); 

     var months = results.then(function(data) { 
      var monthsArray = []; 

      data.content.forEach(month => { 
       monthsArray.push(month.__data); 
      }); 

      return Ember.RSVP.all(monthsArray); 
     }); 

     return Ember.RSVP.hash({ 
      data: months 
     }); 
    } 
}); 

此獲取我的模板像這樣的訪問（組件被灰燼圖表插件提供）{{vertical-bar-chart data=model.data}}。

就像開頭所說，我得到一個TypeError: Cannot convert object to primitive value。我的唯一領導就是它來自於這樣的事實：如果我對數據進行硬編碼（以第二種正確的格式）並返回而不是從Mirage中拉出來，則條形圖填充得非常好。但是，如果我按照上面的方式進行操作，則會出現錯誤。我使用了afterModel掛鉤到console.log(resolvedModel)，並且數據是以任何方式。也許這不是一個好的指標。

無論如何，我與Ember超級綠色，我可能會受到誤解所有這些東西的痛苦。任何幫助表示讚賞。對不起，很長的文章。

Answer 1

編輯：答案仍然在於JSON.parse(JSON.stringify(data))，但我kumkanillam的更簡單的方法返回的數據更新。

原來的誤差爲Array.toString來調用從模型鉤返回的數據。它在一個硬編碼的對象數組上工作得很好，但是當通過RSVP返回時，就像我在我的問題中那樣。不知怎的，我試着用Object.create（）來設置原型來解決這個問題，但是，在使用Ember.RSVP時，返回數組中的對象沒有toString方法，但沒有工作。

底線是，而且我還沒有100％清楚，我想也許Ember正在把我的數組變成別的東西（一個Ember對象？），而不僅僅是一個普通的JS對象數組。所以，我最終返回的數據轉換成又一個普通的JS對象，通過this answer.

路線現在看起來是這樣的：

model() { 
    // Fetch month data from store 
    return this.get('store').findAll('month').then(data => { 
     var monthsArray = []; 
     data.content.forEach(month => { 
      monthsArray.push(month.__data); 
     }); 

     // Must convert into normal JS object to avoid TypeError: cannot convert object into primitive value 
     return JSON.parse(JSON.stringify(monthsArray)); 
    }); 
} 

的JSON.parse(JSON.stringify(data))基本數據變成一個字符串，然後將其轉換回一個JS對象。它感覺有點骯髒，但在工作了5個小時後，這是唯一有效的工作！

Answer 2

爲什麼需要RSVP.all和RSVP.hash？我錯過了你的要求。 可能是你可以給下面的代碼一個嘗試，

model() { 
     return this.get('store').findAll('month').then(data => { 
      var monthsArray = []; 
      data.content.forEach(month => { 
       monthsArray.push(month.__data); 
      }); 
      return monthsArray; 
     }); 
    } 

和temlate你需要訪問它像model