I read a csv file using the code
var x="dema.csv";
loadCSV(x);
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(request.responseText);
}
I put the data into a dataObject using this code
function parseCSV(data, 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];
var dataObject = {
date: date,
T4: value
};
/
dataArray.push(dataObject);
}
}
}
I get only the date column and T4 column. my problem is that i wanna some way to do some processing ( for loops to verify some conditions (ex: T4 shouldn't surpass 700 over 30 s))
Can i do it only using a dataObject or use a 2D array? how can i get the cells content using the right tool?
var x = "dema.csv";
var dataArray = [];
loadCSV(x);
function loadCSV(x) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
parseCSV(this.responseText, dataArray);
// you can loop over the array like this
//dataArray.forEach((line) => {
// here line contains data, time, tops, cycle, T4, test
// you can access them like line.time, line.T4, line.tops etc
// console.log(line.time);
// console.log(line.tops);
// etc
//});
window.alert(dataArray[0].T4);
}
};
xhttp.open("GET", x, true);
xhttp.send();
}
function parseCSV(data, arr) {
//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] && i > 0) {
// our columns are separated by comma
var column = rows[i].split(",");
var dataObject = mapValuesToObj(column);
arr.push(dataObject);
}
}
}
function mapValuesToObj(csvLine) {
var absTime = csvLine[0];
var time = csvLine[1];
var tops = csvLine[2];
var cycle = csvLine[3];
var t4 = csvLine[4];
var test = csvLine[5];
return {
date: absTime,
time: time,
tops: tops,
cycle: cycle,
T4: t4,
test: test
};
}
Related
I have a file that i want to drop on a page and read file contents. its a CSV with 9 columns. My drop command outputs file contents like this:
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.files[0];
var fileReader = new FileReader();
fileReader.onload = function (e) {
console.log(fileReader.result)
};
fileReader.onerror = function (e) {
throw 'Error reading CSV file';
};
// Start reading file
fileReader.readAsText(data);
return false;
}
When I drag and drop a simple file that is a couple kilobytes or 1MB, I can see the output of the contents of the file. However given a large CSV file, it takes many many minutes before it shows up. Is there a way to make it so that there is some streaming maybe where it does not look like its hanging?
With Screw-FileReader
You can get a ReadableStream and do it in a streaming fashion
'use strict'
var blob = new Blob(['111,222,333\naaa,bbb,ccc']) // simulate a file
var stream = blob.stream()
var reader = stream.getReader()
var headerString = ''
var forEachLine = function(row) {
var colums = row.split(',')
// append to DOM
console.log(colums)
}
var pump = function() {
return reader.read().then(function(result) {
var value = result.value
var done = result.done
if (done) {
// Do the last line
headerString && forEachLine(headerString)
return
}
for (var i = 0; i < value.length; i++) {
// Get the character for the current iteration
var char = String.fromCharCode(value[i])
// Check if the char is a new line
if (char.match(/[^\r\n]+/g) !== null) {
// Not a new line so lets append it to
// our header string and keep processing
headerString += char
} else {
// We found a new line character
forEachLine(headerString)
headerString = ''
}
}
return pump()
})
}
pump().then(function() {
console.log('done reading the csv')
})
<script src="https://cdn.rawgit.com/jimmywarting/Screw-FileReader/master/index.js"></script>
If you prefer using the old FileReader without dependencies, pipe's and transform
'use strict'
var blob = new Blob(['111,222,333\naaa,bbb,ccc']) // simulate a file
var fr = new FileReader()
var headerString = ''
var position = 0
var forEachLine = function forEachLine(row) {
var colums = row.split(',')
// append to DOM
console.log(colums)
}
var pump = function pump() {
return new Promise(function(resolve) {
var chunk = blob.slice(position, position + 524288)
position += 524288
fr.onload = function() {
var value = fr.result
var done = position >= blob.size
for (var i = 0; i < value.length; i++) {
var char = value[i]
// Check if the char is a new line
if (char.match(/[^\r\n]+/g) !== null) {
// Not a new line so lets append it to
// our header string and keep processing
headerString += char
} else {
// We found a new line character
forEachLine(headerString)
headerString = ''
}
}
if (done) {
// Send the last line
forEachLine(headerString)
return resolve() // done
}
return resolve(pump())
}
// Read the next chunk
fr.readAsText(chunk)
})
}
pump().then(function() {
console.log('done reading the csv')
})
I am creating an interactive on student loan defaults. I am pulling the CSV from google sheets and parsing it with some code I wrote. I do a state name check which becomes arrayName and I push the data to that states array.
15 rows in I get arrayName.push is not a function...yet it worked for the data prior and the data has not changed format or type.
I am going to include the brief snippet and the csv link. If you would like the whole code download from the github link.
Thanks,
Michael
//Load CSV from Google Docs
function loadCSV() {
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status==200){
var data = xmlhttp.responseText.toString();
dataArray = data.split(',');
console.log('data length: '+dataArray.length);
parseData(dataArray);
}
};
xmlhttp.open("GET",'http://cors.io/?u=' + url);
xmlhttp.send(null);
};
counter = 1;
arrayName = '';
function parseData(data){
for (var i = 0; i < data.length; i++) {
//Counter for doing statname check when it gets to new row
if (counter === 1) {
if (arrayName != data[i].toString().toLowerCase()) {
// Code for creating arrays will go here in future [...]
arrayName = data[i].toString().toLowerCase();
arrayName = eval(arrayName);
arrayName.push(data[i]);
counter++
} else { counter++ }
} else {
arrayName.push(data[i]);
counter++;
if (counter === 14) { counter = 1; };
}
console.log(data[i]);
};
console.log(data);
console.log(alabama);
};
loadCSV();
CSV
https://docs.google.com/spreadsheets/d/1n-XiUc1JdRZpAo-WDj6MleE6WcDDnZwqdbQk0rudbLw/pub?output=csv
Repo
https://github.com/mpaccione/Loan-Defaults
You are using split(','), which splits on every ',' - including those between quotes (see line 15)
dataArray = data.split(',');
line 15:
"700 PELHAM ROAD, NORTH"
Is there an easy way to do this in javascript?
arr = ["red","blue","green","red","blue", "yellow"]
output = ["green", "yellow"]
Basically if a value is shown only once in an array output it. The order is random.
There are easy ways to do this in php, javascript is confusing me.
Need to run this on at least 4000 values, not sure what's faster, regex or array functions?
Thanks for any help.
code having problem with: myarrs values aren't accessible outside the function, I am stuck there. The file loads otherwise,
var txt = '';
var myarr = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 0 && xmlhttp.readyState == 4){
txt = xmlhttp.responseText;
myarr = txt.split("\n");
});
//alert(myarr.length);
xmlhttp.open("GET","list.csv",true);
xmlhttp.send();
var map = new Object();
for(var i = 0; i < myarr.length; i++)
{
if(map[myarr[i]] === undefined)
{map[myarr[i]] = 1; }
else
{map[myarr[i]]++; }
}
var result = new Array();
for(var i = 0; i < myarr.length; i++)
{
if(map[myarr[i]] > 1)
{ //do nothing
}
else
{result.push(myarr[i]);}
}
console.debug(result);
document.write(result);
If order of the unique elements doesn't matter, you can store the item in an object and increment the count, like this
var arr = ["red", "blue", "green", "red", "blue", "yellow"], obj = {};
arr.forEach(function(currentItem) {
obj[currentItem] = (obj[currentItem] || 0) + 1;
});
And then filter out all the items for which the value is not 1, to get the unique values
var unique = Object.keys(obj).filter(function(currentItem) {
return obj[currentItem] === 1;
});
console.log(unique);
# [ 'green', 'yellow' ]
Note: If you don't declare the variables with var keyword, they will become global properties.
var txt = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
//for local files use status zero not 200
if(xmlhttp.status == 0 && xmlhttp.readyState == 4){
txt = xmlhttp.responseText;
myarr = txt.split("\n");
display = myarr.filter(function(a,b,c){return c.indexOf(a)===c.lastIndexOf(a);});
document.write(display);
// myarr.replace(",", "<br>");
}
};
xmlhttp.open("GET","list.csv",true);
xmlhttp.send();
The only thing I don't understand is why does the page keep trying to load after it finishes processing the whole file.
So my problem in the code below is in the following if else if statement at the bottom:
1. the code in both of the if statements work perfect.
2. the issue is that when i run the code on one can be use.
if i do 2 separate if statements only the second one works.
if i do 1 if and one else if only the if statement works and the else if does nothing.
a little more info: what I'm trying to do is every time the function times out and loops through again it will check the if statements and if something changed to run the appropriate if clause.
PLEASE LET ME KNOW IF MORE INFO IS NEEDED.
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject()
{
var xmlHttp;
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e)
{
xmlHttp = false;
}
}
else
{
try
{
xmlHttp = new XMLHttpRequest();
}catch(e)
{
xmlHttp = false;
}
}
if(!xmlHttp)
alert("cant create object");
else
return xmlHttp;
}
function process_search()
{
if(xmlHttp.readyState==0 || xmlHttp.readyState==4)
{
search_parameter = encodeURIComponent(document.getElementById("userInput").value);
search_type = encodeURIComponent(document.getElementById("userOptions").value);
xmlHttp.open("GET", "../pages/search_xml.php?search_parameter=" + search_parameter + "&search_type=" + search_type, true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
}
else
{
setTimeout('process_search()',5000);
}
}
function handleServerResponse()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
xmlResponse = xmlHttp.responseXML;
root = xmlResponse.documentElement;
if(document.getElementsByTagName('find_users')) // FIND USERS
{
first_name = root.getElementsByTagName('first');
last_name = root.getElementsByTagName('last');
users = document.createElement('ul');
users.setAttribute("id", "usersFound");
document.getElementById("underInput").innerHTML = ""; //RESETS THE DIV BEFORE INSERTING DATA
for(var i=0; i< first_name.length; i++)
{
usersList = document.createElement('li');
t = document.createTextNode(first_name.item(i).firstChild.data + " - " + last_name.item(i).firstChild.data + "<br/>");
usersList.appendChild(t);
underInput = document.getElementById("underInput");
underInput.appendChild(usersList);
}
}else if(document.getElementsByTagName('find_config_item')) //FIND CONFIG ITEMS
{
item = root.getElementsByTagName('item');
desc = root.getElementsByTagName('description');
itemsList = document.createElement('ul');
itemsList.setAttribute("id", "itemsFound");
document.getElementById("underInput").innerHTML = ""; //RESETS THE DIV BEFORE INSERTING DATA
for(var i=0; i< item.length; i++)
{
itemList = document.createElement('li'); // CREATE LIST ITEM ELEMENT
t = document.createTextNode(item.item(i).firstChild.data + " - " + desc.item(i).firstChild.data + "<br/>");
itemList.appendChild(t);
underInput = document.getElementById("underInput");
underInput.appendChild(itemList);
}
}
setTimeout('process_search()', 5000);
}
else
{
alert("something is wrong");
}
}
}
You shouldn't really rely on try/catch for this use case. You can be fairly certain the XMLHttpRequest or a Mircrosoft.XMLHTTP object will exist so you could simplify your code to the following:
function createXmlHttpRequestObject () {
return window.XMLHttpRequest ? new XMLHttpRequest() : new XDomainRequest();
}
var xmlHttp = createXmlHttpRequestObject();
Let me know if you would like to see a non ternary version
I have trouble in parsing the JSON using the Javascript.My resultant variable 'text' do does not have the result after completion of loop. Can anybody guide me how can I parse this JSON properly.
var xmlr = null;
var text = '';
if (window.XMLHttpRequest) {
xmlr = new XMLHttpRequest();
} else {
xmlr = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlr.onreadystatechange = function () {
if (xmlr.readyState == 4 && xmlr.status == 200) {
var data = JSON.parse(xmlr.responseText);
for (var i = 0; i <= data.length; i++) {
text += '<option>' + data[i].member_first_name + '</option>';
}
console.log(text); // here not get result in text
}
}
xmlr.open("GET", "data.json", true);
xmlr.send();
also content of data.json are
[
{"member_id":"3","member_first_name":"sachin ","member_last_name":"kumar"},
{"member_id":"4","member_first_name":"abhijit","member_last_name":"kumar"},
{"member_id":"5","member_first_name":"nithin","member_last_name":"ev"},
{"member_id":"6","member_first_name":"tukaram","member_last_name":"kumar"},
{"member_id":"7","member_first_name":"manish","member_last_name":"mungle"},
{"member_id":"8","member_first_name":"dsfdgfh","member_last_name":"dfgfhgfh"},
{"member_id":"9","member_first_name":"hjhgjkhkhj","member_last_name":""},
{"member_id":"10","member_first_name":"hjhkjhggf","member_last_name":""},
{"member_id":"11","member_first_name":"klkjlgfhf","member_last_name":"hjghkj"},
{"member_id":"12","member_first_name":"jkhkjhkl","member_last_name":"hgjgffhfkhj"},
{"member_id":"13","member_first_name":"hfgtjgjhg","member_last_name":"fghjgfhjg"},
{"member_id":"14","member_first_name":"hgjgfjhj","member_last_name":"hgjhgjhfg"},
{"member_id":"15","member_first_name":"cvcxvnvnbv","member_last_name":"nbvcbvc"},
{"member_id":"16","member_first_name":"vbvcnbnbm","member_last_name":"vbxgdssdg"},
{"member_id":"17","member_first_name":"lkfndbfbsd","member_last_name":"dfggfhfh"},
{"member_id":"18","member_first_name":"fghjjdfd","member_last_name":"fgfghghf"},
{"member_id":"19","member_first_name":"ghgfjhfj","member_last_name":"fghfhfd"},
{"member_id":"20","member_first_name":"dfhgfhh","member_last_name":"gdfhfd"}
]
To traverse the object array best available in java script that , traverse the object array using for/in loop than for loop, so my final code which traverse the object array as follow:-
var xmlr = null;
var text = '';
if (window.XMLHttpRequest) {
xmlr = new XMLHttpRequest();
} else {
xmlr = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlr.onreadystatechange = function () {
if (xmlr.readyState == 4 && xmlr.status == 200) {
var data = JSON.parse(xmlr.responseText);
for (var key in data) {
text += '<option>' + data[key].member_first_name + '</option>';
}
console.log(text);
}
}
xmlr.open("GET", "data.json", true);
xmlr.send();