Ember.RSVP.hash在路由的模型掛鈎中給出“無法將對象轉換為原始值”

Question

編輯：進一步看時，正在從模型掛鈎返回的數組上調用toString 。 硬編碼，此方法可以正常工作，但是像我在下面那樣返回時，它卻不能。

TL; DR：我正在將一個數據數組處理為另一種“格式”，以便可以使用Ember Charts附件。 為此，我在路線的模型掛鈎中使用了Ember.RSVP，但遇到了TypeError: Cannot convert object to primitive value ，也不知道為什么。

我一直在學習Ember（遵循他們的快速入門，然后是超級租賃教程），現在我正嘗試用它來構建自己的項目。

我遇到的問題是在路由的模型掛鈎中處理異步操作。 這可能是一本長篇小說，但我正在嘗試非常具體。 但是，最終的問題是，我遇到了TypeError: Cannot convert object to primitive value在最后都TypeError: Cannot convert object to primitive value 。

我正在使用Mirage偽造后端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 ）的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 Vertical Bar Graph組件的數據有所不同。

到目前為止，我的解決方案（不起作用）是遍歷初始數據並填充一個新數組，該數組看起來像Ember Charts需要它。 據我了解，這只能異步發生，因為我必須進行一次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
        });
    }
});

這樣可以在我的模板中訪問（該組件由Ember Charts插件提供） {{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返回時卻不能如我所問的那樣。

經過檢查，結果發現，使用Ember.RSVP時，返回數組中的對象上缺少toString方法，以某種方式...我嘗試通過使用Object.create（）設置原型來解決此問題，但沒有工作。

底線是，但我仍然不是100％清楚，我以為Ember可能會將我的數組變成其他東西（一個Ember Object？），而不僅僅是普通的JS對象數組。 因此，我最終通過此答案將返回的數據再次轉換為普通的JS對象。

現在的路線如下所示：

    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;
        });
    }

並確定您需要像model一樣訪問它