从单个 ajax GET 创建多个数据源答案

【问题标题】：Creating multiple DataSources from a single ajax GET从单个 ajax GET 创建多个数据源
【发布时间】：2015-08-17 08:39:06
【问题描述】：

我正在尝试将来自$.getJSON 调用的数据分配给两个不同的数据源。一个将包含“原始”数据，另一个将被操纵。

我收到的 json（以下数组）：

{
  "ID": 1,
  "Cust_Id": 1,
  "Login_Id": 1,
  "Hours": 5,
  "Date": "12/08/2015"
  "Comment": ""
}

我使用 dxList 来显示上述数据，只是我收到的原始数据，但我使用 dxChart 来显示您在本周为客户工作的小时数的图表。所以这就是我想要的：

[
  {
    "Date": "12/08/2015",
    "Hours": 5
  },
  {
    "Date": "13/08/2015",
    "Hours": 7
  }
]

代替：

[
  {
    "Date": "12/08/2015",
    "Hours" 3
  },
  {
    "Date": "12/08/2015",
    "Hours": 2
  },
  {
    "Date": "13/08/2015",
    "Hours": 2
  },
  {
    "Date": "13/08/2015",
    "Hours": 5
  }
]

如果使用我收到的原始数据，我可能会在 x 轴上出现两次日期，这是我不想要的，我想创建一个新的数据源，使用哈希表结合 date 和 hours （简单的键/值）：

var dataSource = new DevExpress.data.DataSource(baseAddress + "hours/login/customer/" + window.loggedInUser.Id + "/" + params.id.Id);

var chartSource = new DevExpress.data.DataSource({
    load: function () {
        console.log("CHARTSOURCE LOAD FUNCION");
        var resultArray = [];
        var chartArray = {};
        console.log(dataSource);
        console.log(dataSource.length);
        for (var i = 0; i < dataSource.length; i++) {

            if (chartArray.hasOwnProperty(dataSource[i].Date)) {
                chartArray[dataSource[i].Date] += dataSource[i].Hours;
            } else {
                chartArray[dataSource[i].Date] = dataSource[i].Hours;
            }
        }
        for (var key in chartArray) {
            resultArray.push({
                Date: key,
                Hours: chartArray[key]
            });
        }
        console.log("RETURN RESULT ARRAY");
        return resultArray;
    }
});

如您所见，我在单独调用中执行此操作，但服务 (WCF) 在尝试创建与数据库的连接时崩溃，尽管第一次调用 var dataSource 仍在执行它的工作，这意味着它试图创建实例，但它不能。

我将如何结合这两个功能？

我的尝试

var chartSource;

var dataSource = new DevExpress.data.DataSource(baseAddress + "hours/login/customer/" + window.loggedInUser.Id + "/" + params.id.Id, function (json) {
    chartSource = new DevExpress.data.DataSource({
        load: function () {
            console.log("CHARTSOURCE LOAD FUNCION");
            var resultArray = [];
            var chartArray = {};
            for (var i = 0; i < json.length; i++) {

                if (chartArray.hasOwnProperty(json[i].Date)) {
                    chartArray[json[i].Date] += json[i].Hours;
                } else {
                    chartArray[json[i].Date] = json[i].Hours;
                }
            }
            for (var key in chartArray) {
                resultArray.push({
                    Date: key,
                    Hours: chartArray[key]
                });
            }
            console.log("RETURN RESULT ARRAY");
            return resultArray;
        }
    });
});

【问题讨论】：

标签： javascript ajax devextreme phonejs

【解决方案1】：

在您的情况下，您可以手动调用 $.getJSON 方法，然后在回调中为每个小部件初始化 dataSource 实例：

$.getJSON('/api').done(function(response){
    //init dataSource...
});

我创建了一个示例 - http://jsfiddle.net/685taxbm/ 来演示这种方法。

我使用了伪造的 load 函数而不是 $.getJSON 和两个列表而不是列表和图表。

【讨论】：