Assign dataframe (from dataiku.fetch()) to variable JS

Solved!
zasadamaciej
Level 1
Assign dataframe (from dataiku.fetch()) to variable JS

Hi,

I'm creating webapp in dataiku which will be displaying data in WebDataRocks table.

Following function supposed to:

  1. Fetch Data from dataset (done by get_data)
  2. Convert dataFrame object into JSON table acceptable by WebDataRocks (JSON_data)
  3. Create WebDataRocks Table (create_pivot)

Below is code snippet that I'm using:

// TO DO: Create Callback inside that you recieve dataframe 
function get_data (name) {
    var data = dataiku.fetch(name, function(dataFrame) {
        return dataFrame;
    })
}

function JSON_data (df) {        
    // Pull row and columns from dataFrame
    var columns = df['__resp']['columns'];
    var rows = df['__resp']['rows'];
    var array = [];

    // JSON array acceptable by WebDataRocks needs to be in format:
    // [{"Key": "Value}]
    // Therefore have to convert Dataframe into that format

    // Loop for that many rows as in DF
    for (i = 0; i < rows.length; i++) {
        // Create empty object it will hold values + keys (columns) from row
        var obj = {};
        // For every value in row pair it with key (column)
        for (j = 0; j < rows[i].length; j++) {
            obj[columns[j]] = rows[i][j];
        }
        array[i] = obj;
    }
    return array
}

function create_pivot(name, callback, callback1) {
    var dataFrame = get_data(name);
    var JSON = JSON_data(dataFrame);
    
    // Create Dashboard table
    var pivot = new WebDataRocks({
        container: "#wdr-component",
        toolbar: true,
        report: {
            "dataSource": {
                "data": JSON
            }
        }
    });
    return pivot
}

var my_pivot = create_pivot("My Dataset", get_data, JSON_data)

The problem that I'm facing is on the very beginning where var data in function get_data is "undefined". I know that I need to wait for function before it will be created but how I can develop it in JS?

What I basically want is variable which holds data from dataset that I'm pulling.

Any help or hint will be appreciated.

Thanks,

Maciej

0 Kudos
1 Solution
AlexandreL
Dataiker

Hi,

Indeed, it is important to understand that fetch is asynchronous, since it will be executed without being blocking. But the HTTP call to DSS will take some time to be sent, processed, and answered. The function(dataFrame){} part is executed later and data is not assigned the return value of this function (it is assigned the return value of dataiku.fetch() but this one just returns undefined).

You should be able to meet your needs if you pass  your different functions in the fetch success function call.

dataiku.fetch("My Dataset", {
        sampling: "head",
        limit: 10000
    }, function(df) {
	
	var columns = df['__resp']['columns'];
	var rows = df['__resp']['rows'];
    var array = [];
	
	// JSON array acceptable by WebDataRocks needs to be in format:
    // [{"Key": "Value}]
    // Therefore have to convert Dataframe into that format
​
    // Loop for that many rows as in DF
    for (i = 0; i < rows.length; i++) {
        // Create empty object it will hold values + keys (columns) from row
        var obj = {};
        // For every value in row pair it with key (column)
        for (j = 0; j < rows[i].length; j++) {
            obj[columns[j]] = rows[i][j];
        }
        array[i] = obj;
    }
	
	function create_pivot(array, callback, callback1) {
​
		// Create Dashboard table
		var pivot = new WebDataRocks({
			container: "#wdr-component",
			toolbar: true,
			report: {
				"dataSource": {
					"data": array
				}
			}
		});
		return pivot
	}
​
	// Create pivot
	create_pivot(array)
​
});

 

View solution in original post

0 Kudos
2 Replies
AlexandreL
Dataiker

Hi,

Indeed, it is important to understand that fetch is asynchronous, since it will be executed without being blocking. But the HTTP call to DSS will take some time to be sent, processed, and answered. The function(dataFrame){} part is executed later and data is not assigned the return value of this function (it is assigned the return value of dataiku.fetch() but this one just returns undefined).

You should be able to meet your needs if you pass  your different functions in the fetch success function call.

dataiku.fetch("My Dataset", {
        sampling: "head",
        limit: 10000
    }, function(df) {
	
	var columns = df['__resp']['columns'];
	var rows = df['__resp']['rows'];
    var array = [];
	
	// JSON array acceptable by WebDataRocks needs to be in format:
    // [{"Key": "Value}]
    // Therefore have to convert Dataframe into that format
​
    // Loop for that many rows as in DF
    for (i = 0; i < rows.length; i++) {
        // Create empty object it will hold values + keys (columns) from row
        var obj = {};
        // For every value in row pair it with key (column)
        for (j = 0; j < rows[i].length; j++) {
            obj[columns[j]] = rows[i][j];
        }
        array[i] = obj;
    }
	
	function create_pivot(array, callback, callback1) {
​
		// Create Dashboard table
		var pivot = new WebDataRocks({
			container: "#wdr-component",
			toolbar: true,
			report: {
				"dataSource": {
					"data": array
				}
			}
		});
		return pivot
	}
​
	// Create pivot
	create_pivot(array)
​
});

 

0 Kudos
zasadamaciej
Level 1
Author

Hi @AlexandreL 

Thanks for quick respond.

I've did something similar as you did as a workaround however I was curious whether we can force JS to wait for DataFrame to be fetched before moving one with further code execution (it's habit from Python development and I'm still trying to get use to asynchronous functions).

Anyway your answer resolves my issue and clarify my assumptions therefore we can close the thread.

Appreciate your help on this!

0 Kudos