How to Define Papa Parse Results as Global? - javascript

I'm trying to feed a csv file into Chart.js using Papa Parse. I tried to define the result from Papa Parse as a global array, but I found two following examples I'm confused with.
<!doctype html>
<html>
<script src=https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.3/papaparse.min.js>
</script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js>
</script>
<script>
var helloworld=Papa.parse("1,2,3,4,5").data;
document.write(JSON.stringify(helloworld));
</script>
</html>
This code works well, so I tried to tune it to feed a csv file.
<!doctype html>
<html>
<script src=https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.3/papaparse.min.js>
</script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js>
</script>
<script>
var helloworld=Papa.parse("csv.csv",{download:true}).data;
document.write(JSON.stringify(helloworld));
</script>
</html>
I thought I did the same thing as the csv.csv file contains just the five numbers separated by commas, but the code printed nothing. Which part do I need to correct? Thank you.

Related

Dynamically reading text file into page

I'm trying to load a .txt file into my simple html page. I'm very noobish and all the code i got is stolen from stackoverflow.
The text file is in the same folder as the html file and contains some text that I'd like to have shown in a div and not just loaded in at the start but dynamically updated (in a 1 sec interval).
The Page that results from the code is just empty.
I am using Chrome 73.
I only use the html file and the txt file. No other files are in the folder.
<html>
<head>
<script type="text/javascript">
setInterval(read,1000);
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I don't know what's wrong with this code. Am I missing libraries? If you came up with a completely new code that would be appreciated as well.
Yes, you are missing the jQuery library. Try it like this and let me know:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
setTimeout(function(){read() },1000);
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Reference:
https://stackoverflow.com/a/24320973/1447509
See note in italics at very bottom of this article
what about a simple jQuery Load ?
$("#container").load("file.txt");
http://api.jquery.com/load/

html not responding to outside js file changes

//index.php
<head>
<script src="/js/test.js"></script>
<style></style>
</head>
<body>
<script>
callalert();
</script>
</body>
//test.js
function callalert() {
alert('Allertt');
}
eg: i change the fn completely to: callalert(msg) {
var msg;
alert(msg);
}
//and html to:
callalert('Hello!');
//and it wont change, it still says "Allertt"
Anything would be appreciated!
So recently i've tried to implement some javascript libraries to a webpage. But html wont call anything from other js files. I tried many things, calling simple functions from js files, and somtimes it works but when I delete the test, function the page will display the same result as the functions is still there. It will take a long time for it to respond to the changes of the js.
I even tried from diffrent devices.
Anything would be appreciated!
Edit: When i posted this i modified the function from 'Allertt' to 'Hello!'.
Now, that I checked after 5hrs the script is updated. Also, yes this is running online on a server.
I have prepared an example for you, which works perfectly:
HTML FILE
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<script>
myFun();
</script>
</body>
</html>
External JS
function myFun(){
alert('test');
}
This calls myFun from external file, on every refresh, like it should.

How tho fetch the json data in Javascript for the image attached,it says undefined

image from html codethis is the screenshot of the consolestrong text
2 images attached
When i am trying to fetch the id its saying Undefined. i am trying like response[0].id . if we write like response[0] it shows json object also.
Also if we copy the json data to console and paste the value of response to a variable and then do response[0].id then it works. but from code it doesnot.
Seems a problem with your JSON data.
This is the code i have written working fine with javascript.
<!doctype html>
<html>
<head >
<title>
stack
</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
<script>
var response=[{"id":"1", "name":"abhishek","gender":"M"},{"id":"1", "name":"abhishek","gender":"M"}];
function myFunction() {
console.log(response[0].id);
}
</script>
</html>
Hello can you please try something like:
var listdata = [{"id":"1", "name":"abhishek","gender":"M"},{"id":"2", "name":"yogesh","gender":"M"},{"id":"3", "name":"rubi","gender":"F"}];
console.dir(listdata[0].id);
alert(listdata[0].id);
you can see running example here

Get page url from embeded JS script

I have an HTML page that calls a JS file. Within that JS file I need to know what the URL of the HTML page is.
So far I have this.
HTML -
<!doctype html>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Within my main.js I have the following:
$(function() {
$ = jQuery;
window.remoteUser = "%globals_server_REMOTE_USER%";
window.targetURL = "%globals_asset_url%";
console.log(document.referrer);
});
I thought document.referrer would return the URL of the html page. However it returns a blank line in the console.
Any help would be great. Thanks
Try this,
console.log(document.URL);
OR
console.log(window.location.href);
since i read that it doesn't work in some versions of firefox
location.href used to get url the of page.
jQuery(document).ready(function(){
jQuery("#url1").html(location.href);
});
DEMO

Convert .CSV to HTML Table

I want to convert a .csv file to a HTML Table in jQuery. To accomplish that, I'm using a jQuery Plugin called CSVToTable.
The way I used it in my code is as follow:
I called the .CSVToTable('path/to/file.csv') on my <div id="ItemTable"></div>:
$("#ItemTable").CSVToTable('ItemDatabase.csv', {
loadingImage: 'img/loading.gif',
startLine: 0
});
Everything seemed to work, as well as the loading.gif (which was included in the download).
My first try was running it on the ItemDatabase.csv, which is a .csv that contains approx. 350 lines. It kept loading and loading, and after 15 minutes, I tried it with a smaller file that contains 5 lines. It made no difference.
I looked at the source of their website with a demo, which worked fine, replaced the code, but made no difference.
If somebody could tell me what I'm doing wrong, that would be very helpful.
Note: I checked the file paths, and everything is initialized correctly
EDIT: For #sakir, the first 4 lines of my .csv file:
Name,Tier,Kind,Lvl,mDam,xDam,HR,MR,SD,LS,MS,XB,LB
Depressing Bow,Depressing,Bow,1,0,0,NONE,NONE,NONE,NONE,NONE,NONE,NONE
Oak Wood Bow,Basic,Bow,1,4,6,NONE,NONE,NONE,NONE,NONE,NONE,NONE
Birch Wood Bow,Basic,Bow,6,6,10,NONE,NONE,NONE,NONE,NONE,NONE,NONE
You can not use file from the local-file system. Please copy your file on the web-server and provide the url to that file in the .CSVToTable(url_file).
Try this way mate.But be sure to load required javascript and path to csv file.Inform me if it works for.Best of luck
csv file structure(test.csv)
Name,Tier,Kind,Lvl,mDam,xDam,HR,MR,SD,LS,MS,XB,LB
Depressing Bow,Depressing,Bow,1,0,0,NONE,NONE,NONE,NONE,NONE,NONE,NONE
Oak Wood Bow,Basic,Bow,1,4,6,NONE,NONE,NONE,NONE,NONE,NONE,NONE
Birch Wood Bow,Basic,Bow,6,6,10,NONE,NONE,NONE,NONE,NONE,NONE,NONE
code to convert csv 2 table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery CSVToTable</title>
<link rel="stylesheet" href="css/csvtable.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.csvToTable.js"></script>
</head>
<body>
CSV To Table:<br>
<div id="CSVTable">
</div>
<script type="text/javascript">
$(function() {
$('#CSVTable').CSVToTable('test.csv');
});
</script>
</body>
</html>

Categories

Resources