从JSON填充数据以进行下拉

时间:2014-03-06 13:38:18

标签: javascript jquery json backbone.js marionette

我从服务器接收JSON,看起来像是

{
    "accountType": ["Full","Trial"],
    "states": [
        {"state":"AL","stateDescription":"Alabama","featured":"A1"},
        {"state":"AK","stateDescription":"Alaska","featured":"B1"}
    ],
    "dates":[
        {"dateDescription":"Jan","month":1,"year":2008},
        {"dateDescription":"Feb","month":2,"year":2008}
    ]
}

在我正在做的Backbone文件中:

define([ 'backbone', 'underscore', 'vent', ], function (Backbone, _, vent) {
    'use strict';

    return Backbone.Model.extend({

        url: {},

        loaded: false,

        defaults: {
            accountType: [],
            states: [],
            dates: [],
        },


        initialize: function () {
            this.on('change', this.change);
            var that = this;

            $.getJSON("webapp/jsondata", function (data) {
                that.set({
                    states: data.states.state,
                });
            });

            $.getJSON("webapp/jsondata", function (data) {
                that.set({
                    dates: data.dates.dateDescription,
                });
            });

            $.getJSON("webapp/jsondata", function (data) {
                that.set({
                    accountType: data.accountType,
                });
           });
        },  
    });
});

因此每个$.getJSON都应获取相关数据并填充主干模型默认值。

目前只有account类型有效。我不明白为什么这会起作用而其他人不会,因为它是相同的代码。唯一的区别在于JSON数据,accountType有2个数据。 States有3个,我只想返回一个(state)。

所以我想我的问题在于指定在$.getJSON代码中检索的数据,但在线许多小时都没有显示答案。

1 个答案:

答案 0 :(得分:1)

您的数据中的statesdates键是数组,但您尝试将其作为哈希值进行访问。 如果要从状态数组中提取状态键,可以使用_.pluck

$.getJSON("webapp/jsondata", function (data) {
    that.set({
        states: _.pluck(data.states, 'state')
    });
});

根据提供的数据,_.pluck(data.states, 'state')将为您提供["AL", "AK"]

不是这样,通过使用model.fetchmodel.parse,可以大大简化您的模型。例如:

return Backbone.Model.extend({
    url: "webapp/jsondata",
    loaded: false,
    defaults: function () {
        return {
            accountType: [],
            states: [],
            dates: [],
        };
    },

    parse: function (data) {
        return {
            accountType: data.accountType,
            states: _.pluck(data.states, 'state'),
            dates: _.pluck(data.dates, 'dateDescription')
        };
    },

    initialize: function () {
        this.on('change', this.change);
        this.fetch();
    },  
});

请注意在defaults哈希中使用数组,而是使用函数。