I read a csv file using javascript code and i want to push it into a a 2D Array in order to do some processing
var dataArray = new Array;
function parseCSV(dataArray) {
//replace UNIX new lines
data = data.replace(/\r\n/g, "\n");
//replace MAC new lines
data = data.replace(/\r/g, "\n");
//split into rows
var rows = data.split("\n");
// loop through all rows
for (var i = 0; i < rows.length; i++) {
// this line helps to skip empty rows
if (rows[i]) {
// our columns are separated by comma
var column = rows[i].split(",");
var date=column[0];
var value = column[4];
// create object which contains all these items:
var dataObject = {
date: date,
T4: value
};
dataArray.push(dataObject);
}
}
}
}
As a test, i try to read a cell content and display on the web page to verify that i read the file.
<script type="text/javascript">
var x= dataArray[1][4];
document.write(x);
</script>
but it doesn't show anything.
Can anyone Help??
var dataArray = new Array;
var data = "Date,Description,Created By,Modified By,T4 Tag\n";
data += "20170424,This is record 1,user1,none,Just work please.\n";
data += "20170424,This is record 2,user2,none,I'm trying too.\n";
function parseCSV(dataArray) {
//replace UNIX new lines
data = data.replace(/\r\n/g, "\n");
//replace MAC new lines
data = data.replace(/\r/g, "\n");
//split into rows
var rows = data.split("\n");
// loop through all rows
for (var i = 0; i < rows.length; i++) {
// this line helps to skip empty rows
if (rows[i]) {
// our columns are separated by comma
var column = rows[i].split(",");
var date=column[0];
var value = column[4];
// create object which contains all these items:
var dataObject = {
date: date,
T4: value
};
dataArray.push(dataObject);
}
}
}
parseCSV(dataArray);
Lacking a file, I forced some CSV data into a string for processing.
Your question is not showing these two items:
how you are setting var data
how you are calling parseCSV(dataArray)
If these two things are present all should work - Here's the proof
As far as the html script portion:
your array addressing looks wrong - it seems like it should look like:
<script>
var x = dataArray[1].T4;
document.write(x);
</script>
Here's my reasoning:
I understand that you are passing the CSV data to this function for parsing it into your dataArray variable - correct?
If correct, this data will look something like I have added manually (I added this directly just to work with something).
The bigger item is not so much where the data is coming from, but that ultimately it gets parsed by this parseCSV function.
When this happens, you are building appending to the empty dataArray variable in the following way:
For the first pass this will look as follows:
[{"date" : "Date", "T4" : "T4 Tag"}]
For the second pass:
[{"date" : "Date", "T4" : "T4 Tag"}, {"date" : "20170424", "T4" : "Just work please."}]
For the third pass:
[{"date" : "Date", "T4" : "T4 Tag"}, {"date" : "20170424", "T4" : "Just work please."}, {"date" : "20170424", "T4" : "I\'m trying too."}]
So now when you are in your html section of code, you have no key of address [4].
Your code says:
var x = dataArray[1][4];
Consider the following to see what I mean:
var record = dataArray[1];
//{"date" : "20170424", "T4" : "Just work please."}
//There is no key 4 here only date & T4.
var date = record.date;//returns: "20170424"
var t4 = record.T4;//returns: "Just work please."
In Contrast if you had the following - your method would work
myObj = {"date" : "20170424", "4" : "This is a value for field 4", "T4" : "Just work please."}
myObj[4];//returns "This is a value for field 4";
hopefully this explains it clearly enough.
here is the load csv file function
function loadCSV(file) {
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
} else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load
request.open('GET', file, false);
request.send();
parseCSV(dataArray);
}
Related
Hello I am new to JavaScript and I have been trying to parse JSON data into a JavaScript array. I can load the local .json file and print it to the console. I want to print each 'key' and 'value' pair. Having come from a python background, this is new to me. This is a sample JSON data. The structure of the data I want to use is the same. I am mostly having trouble because of the strucure of the JSON data. I have to control to change the structure of the JSON data
{
"emp_details":[
{
"emp_name":["abc"],
"email":["abc#email.com"],
"job_profile":["Full time"]
}
]
}
And here is what I have done. Which is just read the local file and print it to the console.
function readTextFile(file, callback) {
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4 && rawFile.status == "200") {
callback(rawFile.responseText);
}
}
rawFile.send(null);
}
readTextFile("./data.json",function(text){
var data = JSON.parse(text);
var dataArray = []
dataArray.push(data)
//alert(data);
console.log(dataArray[0]);
});
Ideally I want the result to be like to display in an HTML table:
emp_name
email
job_profile
abc
abc#email.com
Full time
Thank you!
I am assuming that you already have defined HTML table named emp_table, so in that case, you can get desired output by following code: -
const empTable = document.getElementById('emp_table');
empTable.innerHTML = json.emp_details.map((emp) =>
Object.keys(emp).map(
(key) =>
`<tr><td><label><strong>${key}</strong><label></td><td>${emp[key][0]}</td></tr>`
)
);
You can use console.table to print tabular data.
let data = {
"emp_details": [
{
"emp_name": ["abc"],
"email": ["abc#email.com"],
"job_profile": ["Full time"]
},
{
"emp_name": ["def"],
"email": ["def#email.com"],
"job_profile": ["Full time"]
}
]
}
// convert the array in each property to a string
let emp_details = data["emp_details"].map(function(employee) {
return {
emp_name: employee.emp_name[0],
email: employee.email[0],
job_profile: employee.job_profile[0],
}
});
// print the data in a table
console.table(emp_details)
You could create a table in your html file with an id of table:
<table id="table"></table>
And then use a nested for loop to iterate through the data by doing something like this:
readTextFile("./data.json", function(text) {
var data = JSON.parse(text);
var dataArray = data.emp_details;
var table = document.getElementById("table");
for (var i = 0; i < dataArray.length; i++) {
var row = table.insertRow();
for (var key in dataArray[i]) {
var cell1 = row.insertCell();
var cell2 = row.insertCell();
cell1.innerHTML = key;
cell2.innerHTML = dataArray[i][key];
}
}
});
The first for loop iterates through the emp_details array, and the second for loop iterates through each object in the array.
The key and value of each object is then inserted into a new row in the table, with the key in the first cell and the value in the second cell.
I'm new in code with Javascript and I have a problem with an array I need to create.
var tabLine = new Array();
var tabCol = new Array();
var tabComplet = new Array();
var fso, f1, ts, s, cl, ln;
var ForReading = 1;
var i = 0;
function ReadFiles() {
fso = new ActiveXObject("Scripting.FileSystemObject");
// Read the contents of the file.
ts = fso.OpenTextFile("PathToAFile\TextFile.txt", ForReading);
s = ts.ReadAll();
tabLine = s.split('\n');
cl = tabLine.length;
ts.Close();
for (i = 0; i <tabLine.length; i++) {
var tabCol = tabLine[i].split("\t");
for (j=0;j<tabCol.length;j++) {
tabComplet[i,j] = tabCol[j];
alert(tabComplet[i,j]);
}
}
alert(tabComplet[10,5]);
alert(tabComplet[3,5]);
}
ReadFiles();
The file I need to read is a text file; It have many line and each line have information separate by tabulation.
This function read the text file and convert it into an array in two dimensions.
I had some alert to check the contain of my array.
The first alert give me the result I want (it display the content of the array witch is different for each element in the array)but the two other give me the same result. I check with another alert and, in the for boucle, these two element are different.
I make more test and all happen like if my array only have the same line copy/paste.
Thanks in advance for all information that can help me.
Here is an example of file I use :
http://www.k-upload.fr/afficher-fichier-2017-05-18-1b0cfa685testimport2.txt.html
Usually there are bigger than this one but for test it's OK.
I'm working on an add-in for excel 2016 using the javascript API. I can successfully get the range into an array and get the values to show in console.log. I've also been able to get the values into a JSON array using JSON.stringify();
I need to manipulate the array to remove the empty values ("").
Can this be accomplished by using regular javascript array methods?
I'm thinking I can display the results back into a different worksheet using a similar approach like i did with var shWk
Here are some snippets of what I'm trying to do:
(function () {
"use strict";
// The initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
app.initialize();
//document.getElementById("date").innerHTML = Date("MAR 30 2017");
$('#deleteTab').click(deleteTab);
$('#preview').click(preview);
$('#publish').click(publish);
});
};
function preview() {
Excel.run(function(ctx) {
//getting the colname from a date range in B2
var colName = ctx.workbook.worksheets.getItem('preview').getRange("B2");
colName.load('values');
return ctx.sync().then(function() {
//converting colname value to string for column name
var wkN = (colName.values).toString();
// displaying on the task pane
document.getElementById("tst").innerText = wkN;
// testing to confirm i got the correct colname
var shWk = ctx.workbook.worksheets.getItem('preview').getRange("B3");
shWk.values = colName.values;
//building the column connection by setting the table name located on a different worksheet
var tblName = 'PILOT_ZMRP1';
var tblWK = ctx.workbook.tables.getItem(tblName).columns.getItem(wkN);
//loading up tblWK
tblWK.load('values');
return ctx.sync().then(function(){
//this is where my question is:
var arry = tblWK.values;
for (var i=0; i < tblWK.length; i++){
if (tblWK.values !== ""){
arry.values[i][0]) = tblWK.values[i][0]
};
};
console.log(arry.length); //returns 185
console.log (arry.values);//returns undefined
tblWK.values = arry;
var tblWeek = tblWK.values;
console.log(tblWeek.length);//returns 185
console.log(tblWK.values);//returns [object Array] [Array[1],Array[2]
})
});
}).catch(function (error) {
console.log(error);
console.log("debug info: " + JSON.stringify(error.debugInfo));
});
}
What am I missing? Can you point me to some resources for javascript array handling in the specific context of office.js?
I want to thank everyone for the time spent looking at this question. This is my second question ever posted on Stack Overflow. I see that the question was not written as clear as it could've been. What i was trying to achieve was filtering out the values in a 1D array that had "". The data populating the array was from a column in a separate worksheet that had empty values (hence the "") and numeric values in it. the code below resolved my issue.
//using .filter()
var itm = tblWK.values;
function filt(itm){
return itm != "";
}
var arry = [];
var sht = [];
var j=0;
var s=0;
arry.values = tblWK.values.filter(filt);
//then to build the display range to show the values:
for (var i=0; i < itm.length-1; i++) {
if (tblWK.values[i][0]){
var arry; //tblWK.values.splice(i,0); -splice did not work, maybe my syntax was wrong?
console.log("this printed: "+tblWK.values[i][0]);
var cl = ('D'+i); //building the range for display
j++; //increasing the range
s=1;//setting the beignning range
var cll = cl.toString();//getRange() must be a string
console.log(cll);//testing the output
}
}
//using the variable from the for loop
var cl = ('D'+s+':D'+j);
var cll = cl.toString();
console.log(cll);//testing the build string
sht = ctx.workbook.worksheets.getItem('Preview').getRange(cll);
sht.values = arry.values; //displays on the preview tab
console.log (arry.values); //testing the output
The question was probably easier said by asking what vanilla javascript functions does office.js support. I found a lot help reading Building Office Add-ins using Office.js by Micheal Zlatkovsky and by reading the MDN documentation as well as the suggested answer posted here.
Regards,
J
I'm not sure what this check is trying to achieve: tblWK.values !== "". .values is a 2D array and won't ever be "".
For Excel, the value "" means that the cell is empty. In other words, if you want to clear a cell, you assign to "". null value assignment results in no-op.
You can just fetch the values form the array that contains null by using for each and can can push the null values into another array.
I am trying to to convert a CSV file into a javascript array.
Here is my code:
var segments = {
'Segment_1':'inves_cast',
'Segment_2':'foreged_prod',
'Segment_3':'air_prod',
'Segment_5':'worldwide',
'Segment_6':'structurals'
};
var divisions = {
'Division_1':'structurals',
'Division_2':'airfoils',
'Division_3':'wyman',
'Division_4':'energy',
'Division_5':'fasteners',
'Division_6':'struc_comp',
'Division_7':'mech_hard',
'Division_8':'engine_prod',
'Division_9':'corp',
'Division_10':'aero',
'Division_11':'timet',
'Division_12':'',
'Division_13':'spec_metals',
};
var csv = $.get('/path/to/locations.csv');
console.log(csv);
var locationArray = transformLocationData(csv);
function transformLocationData(obj) {
var lineArray = [];
if(obj && obj.data) {
var text = (data.responseText);
lines = text.split('\n');
for(var line in lines) {
var lineTokens = line.split(',');
lineArray = [
lineTokens[0],
lineTokens[1],
lineTokens[3],
lineTokens[4],
lineTokens[5],
lineTokens[6],
lineTokens[11],
lineTokens[12],
lineTokens[13],
lineTokens[14],
lineTokens[15],
segments['Segment_' + lineTokens[8]],
divisions['Division_' + lineTokens[9]]
];
}
}
console.log(lineArray);
}
So what I am trying to do is us AJAX to get the csv file and then split the "responseText" first by line and Second loop through those lines and split it up by commas and then create an array based on those line numbers.
Here is a picture of the data I am getting back from the AJAX call:
With the last console log ( console.log(lineArray); ) it returns an empty array or really it just returns the data the is in var lineArray = []; which is empty if I populate it with data var lineArray = ["Lexus", "Audi", "BMW"]; It will return that array.
Here is a plunker with all the code: https://plnkr.co/edit/CoZGfr6S9R5LDqR1drzq
I know I am doing something wrong but cant seem to get it. I'm not familiar with doing this kind of thing so any help would be greatly appreciated.
You are replacing lineArray with a new array every time, and you're only logging the array at the end of the loop. Perhaps the CSV has an empty line at the end.
If you're wanting an array of arrays, do this instead:
var lineArray = [];
if(obj && obj.data) {
var text = (data.responseText);
lines = text.split('\n');
for(line in lines) {
var lineTokens = line.split(',');
lineArray.push([
lineTokens[0],
lineTokens[1],
lineTokens[3],
lineTokens[4],
lineTokens[5],
lineTokens[6],
lineTokens[11],
lineTokens[12],
lineTokens[13],
lineTokens[14],
lineTokens[15],
segments['Segment_' + lineTokens[8]],
divisions['Division_' + lineTokens[9]]
]);
}
}
console.log(lineArray);
Update:
In addition, you're not handling the results from the Ajax request properly. This line:
var csv = $.get('/path/to/locations.csv');
...does not return the CSV. Rather, it returns a Promise (sort of...). So you cannot parse csv like that. Rather, wait for the results. Change your code to:
$.get('/path/to/locations.csv').then(function (csv) {
var locationArray = transformLocationData(csv);
}, function (err) {
// Handle errors
});
As #vlaz alluded to, you'll also want to change your loop from for..in to a regular for loop:
for (var i = 0; i < lines.length; i++) {
var line = lines[i];
// ...
}
Maybe sounds stupid but the first column of my csv is not the date field.
I can manually edit CSV to change columns order and then works like a charm but since the file is automacally generated I cannot do it frequentely.
Is there any way to set date column if not first?
Edit: here you have sample of my csv
Test server;Date/Time;Latency (ms);Dowload Speed (Kb/s);Upload Speed (Kb/s)
TVAlmansa S.L. (Almansa) [50.87 km];2015/07/07 11:00:31;67.94;57975;25226
Grupo TVHoradada (Pilar De La Horadada) [87.32 km];2015/07/07 12:00:32;46.11;58484;25433
Grupo TVHoradada (Pilar De La Horadada) [87.32 km];2015/07/07 13:00:31;43.75;55262;24106
TVAlmansa S.L. (Almansa) [50.87 km];2015/07/07 14:00:39;89.39;55266;12722
TVAlmansa S.L. (Almansa) [50.87 km];2015/07/07 15:00:35;69.24;56732;22550
1st step to solution
As #danvk says, it seems that dygraphs takes first column from csv file as date argument. There is no way to change this, I just can to load csv file in an array and then set columns I want to display.
Solution
Finally I've used some code based on this post to load and parse my csv file. This is the complete code
//AJAX query for CSV file
var req = new XMLHttpRequest();
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (req.status === 200 || // Normal http
req.status === 0) { // Chrome w/ --allow-file-access-from-files
var data = req.responseText;
drawGraph(data);
}
}
};
req.open('GET', 'bandwith_report.csv', true);
req.send(null);
//Graph draw function
var drawGraph = function(data) {
//data threatment (select columns)
var parsed_data = toArray(data);
var firstRow = parsed_data[0];
var data = parsed_data.slice(1); // Remove first element (labels)
//data display
graph = new Dygraph(
"graphdiv2", //div
data,
{
labels: firstRow
}
);
}
var toArray = function(data) {
//load lines
var lines = data.split("\n");
var arry = [];
//parse lines
for (var idx = 0; idx < lines.length; idx++) {
var line = lines[idx];
// Oftentimes there's a blank line at the end. Ignore it.
if (line.length == 0) {
continue;
}
var row = line.split(";");
// Special processing
// remove first field (including header)
row.splice(0,1);
// parse data (except header)
if (idx > 0) {
row[0] = new Date(row[0]); // Turn the string date into a Date.
// turn string into float
for (var rowIdx = 1; rowIdx < row.length; rowIdx++) {
// Turn "123" into 123.
row[rowIdx] = parseFloat(row[rowIdx]);
}
}
arry.push(row);
}
return arry;
}
No. dygraphs assumes that the first column is the independent (x) axis. If it's not, then you need to modify your data to make it so. Instead of doing this manually, you could do it in JavaScript.