CODEWITHSUNDEEP
javascriptajaxdevextremephonejs
Detilium
Detilium

Reputation: 3034

Creating multiple DataSources from a single ajax GET

I'm trying to assign the data from a $.getJSON call, to two different DataSource's. One will contain the data "raw", the other will be manipulated.

The json I receive (Array of following): 

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

I'm using a dxList to show the above data, just raw as I receive it, but I'm using a dxChart to show a graph of the hours you've worked for a customer over the current week. So this is what I want:

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

Instead of:

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

If using the raw data that I receive, I risk having the date twice on the x axis, which I don't want, instaed I want to create a new datasource, combining dateand hours using a hashtable (simple key/value):

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

As you can see, I'm doing this in a seperate call, but the service (WCF) crashes as it tries to create a connection to the DB, though the first call var dataSource is still doing it's job, meaning that it tries to create to instances, which it can't.

How would I go about combining these two functions?

What I've tried

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

Upvotes: 0

Views: 506

Answers (1)

Sergey
Sergey

Reputation: 5476

In your case you can call the $.getJSON method manually, next in the callback init the dataSource instance for each widget:

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

I've created a sample - http://jsfiddle.net/685taxbm/ that demonstrates this approach.

I've used the fake load function instead of $.getJSON and two lists instead of list and chart.

Upvotes: 0

Related Questions