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:
- Fetch Data from dataset (done by get_data)
- Convert dataFrame object into JSON table acceptable by WebDataRocks (JSON_data)
- 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
Best Answer
-
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) });
Answers
-
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!