I'm trying to load a local JSON file but it won't work. Here is my JavaScript code (using jQuery):
var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);
The test.json file:
{"a" : "b", "c" : "d"}
Nothing is displayed and Firebug tells me that data is undefined. In Firebug I can see json.responseText and it is good and valid, but it's strange when I copy the line:
var data = eval("(" +json.responseText + ")");
in Firebug's console, it works and I can access data.
Does anyone have a solution?
$.getJSON is asynchronous so you should do:
$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in firebug console
});
I had the same need (to test my angularjs app), and the only way I found is to use require.js:
var json = require('./data.json'); //(with path)
note: the file is loaded once, further calls will use the cache.
More on reading files with nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs
require.js: http://requirejs.org/
In a more modern way, you can now use the Fetch API:
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
All modern browsers support Fetch API. (Internet Explorer doesn't, but Edge does!)
or with async/await
async function printJSON() {
const response = await fetch("test.json");
const json = await response.json();
console.log(json);
}
source:
Using Fetch
Fetch in Action
Can I use...?
How to Use Fetch with async/await
If you want to let the user select the local json file (anywhere on the filesystem), then the following solution works.
It uses FileReader and JSON.parser (and no jquery).
<html>
<body>
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
<fieldset>
<h2>Json File</h2>
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
</fieldset>
</form>
<script type="text/javascript">
function loadFile() {
var input, file, fr;
if (typeof window.FileReader !== 'function') {
alert("The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('fileinput');
if (!input) {
alert("Um, couldn't find the fileinput element.");
}
else if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
alert("Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
fr = new FileReader();
fr.onload = receivedText;
fr.readAsText(file);
}
function receivedText(e) {
let lines = e.target.result;
var newArr = JSON.parse(lines);
}
}
</script>
</body>
</html>
Here is a good intro on FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/
If you're looking for something quick and dirty just load the data in the head of your HTML document.
data.js
var DATA = {"a" : "b", "c" : "d"};
index.html
<html>
<head>
<script src="data.js" ></script>
<script src="main.js" ></script>
</head>
...
</html>
main.js
(function(){
console.log(DATA); // {"a" : "b", "c" : "d"}
})();
I should mention that your heap size (in Chrome) is about 4GBs, so if your data is larger than that you should find another method. If you want to check another browser try this:
window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"
Update ES6:
Instead of using the <script> tag to load your data you can load it directly inside you're main.js using the import assert
import data from './data.json' assert {type: 'json'};
how to using XMLHttpRequest to load the local json file
ES5 version
// required use of an anonymous callback,
// as .open() will NOT return a value but simply returns undefined in asynchronous mode!
function loadJSON(callback) {
var xObj = new XMLHttpRequest();
xObj.overrideMimeType("application/json");
xObj.open('GET', './data.json', true);
// 1. replace './data.json' with the local path of your file
xObj.onreadystatechange = function() {
if (xObj.readyState === 4 && xObj.status === 200) {
// 2. call your callback function
callback(xObj.responseText);
}
};
xObj.send(null);
}
function init() {
loadJSON(function(response) {
// 3. parse JSON string into JSON Object
console.log('response =', response);
var json = JSON.parse(response);
console.log('your local JSON =', JSON.stringify(json, null, 4));
// 4. render to your page
const app = document.querySelector('#app');
app.innerHTML = '<pre>' + JSON.stringify(json, null, 4) + '</pre>';
});
}
init();
<section id="app">
loading...
</section>
ES6 version
// required use of an anonymous callback,
// as .open() will NOT return a value but simply returns undefined in asynchronous mode!
const loadJSON = (callback) => {
const xObj = new XMLHttpRequest();
xObj.overrideMimeType("application/json");
// 1. replace './data.json' with the local path of your file
xObj.open('GET', './data.json', true);
xObj.onreadystatechange = () => {
if (xObj.readyState === 4 && xObj.status === 200) {
// 2. call your callback function
callback(xObj.responseText);
}
};
xObj.send(null);
}
const init = () => {
loadJSON((response) => {
// 3. parse JSON string into JSON Object
console.log('response =', response);
const json = JSON.parse(response);
console.log('your local JSON =', JSON.stringify(json, null, 4));
// 4. render to your page
const app = document.querySelector('#app');
app.innerHTML = `<pre>${JSON.stringify(json, null, 4)}</pre>`;
});
}
init();
<section id="app">
loading...
</section>
online demo
https://cdn.xgqfrms.xyz/ajax/XMLHttpRequest/index.html
I can't believe how many times this question has been answered without understanding and/or addressing the problem with the Original Poster's actual code. That said, I'm a beginner myself (only 2 months of coding). My code does work perfectly, but feel free to suggest any changes to it. Here's the solution:
//include the 'async':false parameter or the object data won't get captured when loading
var json = $.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false});
//The next line of code will filter out all the unwanted data from the object.
json = JSON.parse(json.responseText);
//You can now access the json variable's object data like this json.a and json.c
document.write(json.a);
console.log(json);
Here's a shorter way of writing the same code I provided above:
var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);
You can also use $.ajax instead of $.getJSON to write the code exactly the same way:
var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);
Finally, the last way to do this is to wrap $.ajax in a function. I can't take credit for this one, but I did modify it a bit. I tested it and it works and produces the same results as my code above. I found this solution here --> load json into variable
var json = function () {
var jsonTemp = null;
$.ajax({
'async': false,
'url': "http://spoonertuner.com/projects/test/test.json",
'success': function (data) {
jsonTemp = data;
}
});
return jsonTemp;
}();
document.write(json.a);
console.log(json);
The test.json file you see in my code above is hosted on my server and contains the same json data object that he (the original poster) had posted.
{
"a" : "b",
"c" : "d"
}
Add to your JSON file from the beginning
var object1 = [
and at the end
]
Save it
Then load it with pure js as
<script type="text/javascript" src="1.json"></script>
And now you can use it as object1 - its already loaded!
Works perfectly in Chrome and without any additional libraries
I'm surprised import from es6 has not been mentioned (use with small files)
Ex: import test from './test.json'
webpack 2< uses the json-loader as default for .json files.
https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore
For TypeScript:
import test from 'json-loader!./test.json';
TS2307 (TS) Cannot find module 'json-loader!./suburbs.json'
To get it working I had to declare the module first. I hope this will save a few hours for someone.
declare module "json-loader!*" {
let json: any;
export default json;
}
...
import test from 'json-loader!./test.json';
If I tried to omit loader from json-loader I got the following error from webpack:
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix
when using loaders.
You need to specify 'json-loader' instead of 'json',
see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
Recently D3js is able to handle local json file.
This is the issue
https://github.com/mbostock/d3/issues/673
This is the patch inorder for D3 to work with local json files.
https://github.com/mbostock/d3/pull/632
Found this thread when trying (unsuccessfully) to load a local json file. This solution worked for me...
function load_json(src) {
var head = document.getElementsByTagName('head')[0];
//use class, as we can't reference by id
var element = head.getElementsByClassName("json")[0];
try {
element.parentNode.removeChild(element);
} catch (e) {
//
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
script.className = "json";
script.async = false;
head.appendChild(script);
//call the postload function after a slight delay to allow the json to load
window.setTimeout(postloadfunction, 100)
}
... and is used like this...
load_json("test2.html.js")
...and this is the <head>...
<head>
<script type="text/javascript" src="test.html.js" class="json"></script>
</head>
What I did was editing the JSON file little bit.
myfile.json => myfile.js
In the JSON file, (make it a JS variable)
{name: "Whatever"} => var x = {name: "Whatever"}
At the end,
export default x;
Then,
import JsonObj from './myfile.js';
In TypeScript you can use import to load local JSON files. For example loading a font.json:
import * as fontJson from '../../public/fonts/font_name.json';
This requires a tsconfig flag --resolveJsonModule:
// tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"resolveJsonModule": true,
"esModuleInterop": true
}
}
For more information see the release notes of typescript: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html
In angular (or any other framework), you can load using http get
I use it something like this:
this.http.get(<path_to_your_json_file))
.success((data) => console.log(data));
Hope this helps.
An approach I like to use is to pad/wrap the json with an object literal, and then save the file with a .jsonp file extension. This method also leaves your original json file (test.json) unaltered, as you will be working with the new jsonp file (test.jsonp) instead. The name on the wrapper can be anything, but it does need to be the same name as the callback function you use to process the jsonp. I'll use your test.json posted as an example to show the jsonp wrapper addition for the 'test.jsonp' file.
json_callback({"a" : "b", "c" : "d"});
Next, create a reusable variable with global scope in your script to hold the returned JSON. This will make the returned JSON data available to all other functions in your script instead of just the callback function.
var myJSON;
Next comes a simple function to retrieve your json by script injection. Note that we can not use jQuery here to append the script to the document head, as IE does not support the jQuery .append method. The jQuery method commented out in the code below will work on other browsers that do support the .append method. It is included as a reference to show the difference.
function getLocalJSON(json_url){
var json_script = document.createElement('script');
json_script.type = 'text/javascript';
json_script.src = json_url;
json_script.id = 'json_script';
document.getElementsByTagName('head')[0].appendChild(json_script);
// $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)
}
Next is a short and simple callback function (with the same name as the jsonp wrapper) to get the json results data into the global variable.
function json_callback(response){
myJSON = response; // Clone response JSON to myJSON object
$('#json_script').remove(); // Remove json_script from the document
}
The json data can now be accessed by any functions of the script using dot notation. As an example:
console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console
This method may be a bit different from what you are used to seeing, but has many advantages. First, the same jsonp file can be loaded locally or from a server using the same functions. As a bonus, jsonp is already in a cross-domain friendly format and can also be easily used with REST type API's.
Granted, there are no error handling functions, but why would you need one? If you are unable to get the json data using this method, then you can pretty much bet you have some problems within the json itself, and I would check it on a good JSON validator.
You can put your json in a javascript file. This can be loaded locally (even in Chrome) using jQuery's getScript() function.
map-01.js file:
var json = '{"layers":6, "worldWidth":500, "worldHeight":400}'
main.js
$.getScript('map-01.js')
.done(function (script, textStatus) {
var map = JSON.parse(json); //json is declared in the js file
console.log("world width: " + map.worldWidth);
drawMap(map);
})
.fail(function (jqxhr, settings, exception) {
console.log("error loading map: " + exception);
});
output:
world width: 500
Notice that the json variable is declared and assigned in the js file.
$.ajax({
url: "Scripts/testingJSON.json",
//force to handle it as text
dataType: "text",
success: function (dataTest) {
//data downloaded so we call parseJSON function
//and pass downloaded data
var json = $.parseJSON(dataTest);
//now json variable contains data in json format
//let's display a few items
$.each(json, function (i, jsonObjectList) {
for (var index = 0; index < jsonObjectList.listValue_.length;index++) {
alert(jsonObjectList.listKey_[index][0] + " -- " + jsonObjectList.listValue_[index].description_);
}
});
}
});
If you are using a local array for JSON - as you showed in your example in the question (test.json) then you can is the parseJSON() method of JQuery ->
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );
getJSON() is used for getting JSON from a remote site - it will not work locally (unless you are using a local HTTP Server)
How I was able to load the data from a json file in to a JavaScript variable using simple JavaScript:
let mydata;
fetch('datafile.json')
.then(response => response.json())
.then(jsonResponse => mydata = jsonResponse)
Posting here as I didn't find this kind of "solution" I was looking for.
Note: I am using a local server run via the usual "python -m http.server" command.
$.getJSON only worked for me in Chrome 105.0.5195.125 using await, which works a script type of module.
<script type="module">
const myObject = await $.getJSON('./myObject.json');
console.log('myObject: ' + myObject);
</script>
Without await, I see:
Uncaught TypeError: myObject is not iterable
when resolving myObject.
Without type="module" I see:
Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
I haven't found any solution using Google's Closure library. So just to complete the list for future vistors, here's how you load a JSON from local file with Closure library:
goog.net.XhrIo.send('../appData.json', function(evt) {
var xhr = evt.target;
var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
console.log(obj);
});
json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);
console.log(obj[0]["name"]);
I did this for my cordova app, like I created a new javascript file for the JSON and pasted the JSON data into String.raw then parse it with JSON.parse
function readTextFile(srcfile) {
try { //this is for IE
var fso = new ActiveXObject("Scripting.FileSystemObject");;
if (fso.FileExists(srcfile)) {
var fileReader = fso.OpenTextFile(srcfile, 1);
var line = fileReader.ReadLine();
var jsonOutput = JSON.parse(line);
}
} catch (e) {
}
}
readTextFile("C:\\Users\\someuser\\json.txt");
What I did was, first of all, from network tab, record the network traffic for the service, and from response body, copy and save the json object in a local file. Then call the function with the local file name, you should be able to see the json object in jsonOutout above.
What worked for me is the following:
Input:
http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json
Javascript Code:
<html>
<head>
<style>
pre {}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>
<script>
function output(inp) {
document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}
function gethtmlcontents(){
path = window.location.search.substr(1)
var rawFile = new XMLHttpRequest();
var my_file = rawFile.open("GET", path, true) // Synchronous File Read
//alert('Starting to read text')
rawFile.onreadystatechange = function ()
{
//alert("I am here");
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
//alert(allText)
var json_format = JSON.stringify(JSON.parse(allText), null, 8)
//output(json_format)
output(syntaxHighlight(json_format));
}
}
}
rawFile.send(null);
}
function syntaxHighlight(json) {
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
gethtmlcontents();
</script>
</head>
<body>
</body>
</html>
simplest way: save json file as *.js and include to html template as script.
js file like this:
let fileJsonData = {
someField: someValue,
...
}
include like this:
...
<script src="./js/jsonData.js"></script>
...
After include you can call to fileJsonData in global scope.
If you have Python installed on your local machine (or you don't mind install one), here is a browser-independent workaround for local JSON file access problem that I use:
Transform the JSON file into a JavaScript by creating a function that returns the data as JavaScript object. Then you can load it with <script> tag and call the function to get the data you want.
Here comes the Python code
import json
def json2js(jsonfilepath, functionname='getData'):
"""function converting json file to javascript file: json_data -> json_data.js
:param jsonfilepath: path to json file
:param functionname: name of javascript function which will return the data
:return None
"""
# load json data
with open(jsonfilepath,'r') as jsonfile:
data = json.load(jsonfile)
# write transformed javascript file
with open(jsonfilepath+'.js', 'w') as jsfile:
jsfile.write('function '+functionname+'(){return ')
jsfile.write(json.dumps(data))
jsfile.write(';}')
if __name__ == '__main__':
from sys import argv
l = len(argv)
if l == 2:
json2js(argv[1])
elif l == 3:
json2js(argv[1], argv[2])
else:
raise ValueError('Usage: python pathTo/json2js.py jsonfilepath [jsfunctionname]')
Related
I am trying to read a JSON file using JavaScript in my local computer in index.html file only. My JSON file is feed.json as shown below.
feed.json
// API callback
readFile({
"version": "1.0",
"encoding": "UTF-8",
"feed": {
"xmlns": "http://www.w3.org/2005/Atom",
"xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
"xmlns$blogger": "http://schemas.google.com/blogger/2008",
"xmlns$georss": "http://www.georss.org/georss",
"xmlns$gd": "http://schemas.google.com/g/2005",
"xmlns$thr": "http://purl.org/syndication/thread/1.0",
"title": {
"$t": "Title Of A Feed"
},
"id": {
"$t": "ID Of The Feed"
}
}
});
I am reading the above file using the below code that I added just before </body> tag in my index.html file.
index.html
<script>
function readFile(json) {
alert(json.feed.title.$t);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFile");
document.body.appendChild(s);
// Again Calling The Same JSON File
function readFileAgain(json) {
alert(json.feed.id.$t);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFileAgain");
document.body.appendChild(s);
</script>
I want to read this file in two functions on same page and I cant edit feed.json file. When I am running my above code, its reading only above function not second. So how is this possible to read this file again?
It is jsonp not json as you can see you have a wrapper js function in the feed.json:
readFile({......})
//^^^^^^^--------^----you can see this is a function name readFile
As you can see readFile is been supposed to call after load or as a callback so in the first case it is running because the callback matches the function name. While in the second one the callback is not matching with the function name, they are different.
For the second one:
readFile != readFileAgain // so it never gets executed.
So, i would suggest you to make use of localStorage:
function readFile(json) {
if(window.localStorage && !localStorage.getItem['data']){
localStorage.setItem('data', json); // <-----set it first here
}
alert(json.feed.title.$t);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFile");
document.body.appendChild(s);
// Again Calling The Same JSON File
function readFileAgain() {
var json = '';
if(window.localStorage && localStorage.getItem['data']){
json = JSON.parse(localStorage.getItem['data']); // <------------now get it here.
}
alert(json.feed.id.$t);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFileAgain");
document.body.appendChild(s);
The feed.json is in fact a JavaScript file with a single function call: it calls the readFile() function passing an object as argument. So it works the first time, because you have defined the readFile function. The other one, readFileAgain, is defined but never called.
You could assign the data from your file to a global variable in the first read, then use it when needed:
function readFile(json) {
window.feedjson = json;
}
var s = document.createElement("script");
s.setAttribute("src","feed.json");
document.body.appendChild(s);
Now the data is globally available as feedjson, so you can use it:
function getFeedTitle( data ){
alert(data.feed.title.$t);
}
function getFeedId( data ){
alert(data.feed.id.$t);
}
getFeedTitle( feedjson );
getFeedId( feedjson );
I was trying to find out the solutions and I got the below one. Its working now perfectly. Through this I can unlimited functions using single callback...
index.html
<script>
function readFile(json) {
readFileAgain(json);
readFileAgainAgain(json);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFile");
document.body.appendChild(s);
// Again Calling The Same JSON File
function readFileAgain(json) {
alert(json.feed.title.$t);
}
function readFileAgainAgain(json) {
alert(json.feed.id.$t);
}
</script>
Local Storage
Other process is using HTML5 Local Storage. Its also tested and working. You can use your JSON unlimited time also here freely...
<script style='text/javascript'>
function savePostsJSON(json) {
if(window.localStorage){
localStorage.setItem('JSONdata', JSON.stringify(json));
} else {
alert("Your Browser Doesn't Suppoet LocalStorage.");
}
}
var s = document.createElement("script");
s.setAttribute("src","http://www.guitricks.com/feeds/posts/default/?redirect=false&orderby=published&alt=json&max-results=500&callback=savePostsJSON");
document.body.appendChild(s);
function readFile1() {
var json = JSON.parse(localStorage.getItem("JSONdata"));
alert(json.feed.id.$t);
}
function readFile2() {
var json = JSON.parse(localStorage.getItem("JSONdata"));
alert(json.feed.title.$t);
}
readFile1();
readFile2();
</script>
I have a places.php file on my server that returns the following json:
{"places":[{"poi_id":"1","poi_latitude":"53.9606","poi_longitude":"27.6103","poi_title":"Shop1","poi_category":"Shopping","poi_subcategory":"Grocery Store","poi_address":"Street 1, 1","poi_phone":null,"poi_website":null},{"poi_id":"2","poi_latitude":"53.9644","poi_longitude":"27.6228","poi_title":"Shop2","poi_category":"Shopping","poi_subcategory":"Grocery Store","poi_address":"Street 2","poi_phone":null,"poi_website":null}]}
In my javascript I use the following piece of code:
$(document).ready(function() {
var url="places.php";
$.getJSON(url,function(data){
$.each(data.places, function(i,place){
var new1 = place.poi_id;
alert(new1);
});
});
});
However the message box with the poi_id doesn't pop up. What am I doing wrong?
How about like this.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// data source
var jsonStr = '{"places":[{"poi_id":"1","poi_latitude":"53.9606","poi_longitude":"27.6103","poi_title":"Shop1","poi_category":"Shopping","poi_subcategory":"Grocery Store","poi_address":"Street 1, 1","poi_phone":null,"poi_website":null},{"poi_id":"2","poi_latitude":"53.9644","poi_longitude":"27.6228","poi_title":"Shop2","poi_category":"Shopping","poi_subcategory":"Grocery Store","poi_address":"Street 2","poi_phone":null,"poi_website":null}]}';
// parse json string to object
var jsonObj = JSON.parse(jsonStr);
// usage 1
console.log('iterate - without jQuery');
for (var i = 0; i < jsonObj.places.length; i++)
{
var place = jsonObj.places[i];
console.log(place.poi_id);
}
// usage 2
console.log('iterate - with jQuery');
$(jsonObj.places).each(function(index, place)
{
console.log(place.poi_id);
});
</script>
Output:
How to use this in your code:
$(document).ready(function()
{
$.getJSON("/path/to/places.php", function(data)
{
// data here will be already decoded into json object,
// so... you do this
$(data.places).each(function(index, place)
{
console.log(place.poi_id);
});
});
});
Take a look at the manual also: http://api.jquery.com/jquery.getjson/
Should work, if not leave a comment with an error or reason.
Does this do / get you closer:
for (var property in data)
{
if (data.hasOwnProperty(property))
{
console.log(property);
}
}
Is your php actually generating the JSON? If it's only getting a particular file it may be easier to choose your file using JS and AJAX it. Here's the code I use for php anyway.
function callPHP(dataToSend)
{
$.post( "places.php", dataToSend )
.done(function( phpReturn ) {
console.log( phpReturn );
var data = JSON.parse(phpReturn);
for(var i = 0;i<data.places.length;i++)
console.log(data.places[i].poi_id);
});}
}
Setting places.php file encoding to UTF-8 solved the problem
I stuck on the following thing.
I don't have a running local http-service so I'd like to handle my file loading otherwise.
First I created the following function, as suggested in some references.
var fileArray = [];
function readSingleFile(evt) {
//Retrieve the first (and only!) File from the FileList object
var f = evt.target.files;
window.array = []
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
window.array.push(contents);
fileArray.push({name:f.name, contents: contents});
}
r.readAsText(f);
console.log(fileArray);
} else {
alert("Failed to load file");
}
}
document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
Then I try to call the fileArray in a d3.csv function. But this is where I stuck - the console log just shows an empty array.
var dataset = []
d3.csv(fileArray, function(data) {
dataset = data.map(function(d) { return [ d["TEXT"], +d["HOURS"], +d["MONTH_DIGIT"] ]; });
console.log(dataset)
});
The .csv file has the following structure.
"TEXT","HOURS","MONTH_DIGIT"
"Adjustments work",849.45,"01"
How do I exactly call the file to work with d3.js?
If you want to "take the file and it's contents and work with it", you could load the file inside the d3.csv() method, after the callback and the apply the changes you wanted to make to the content.
d3.csv('/path/to/myfile.csv, function(data) {
// Modify the files data
...
// Do something with d3.js
});
For JSON:
var data = JSON.parse(JavascriptStringVariableThatContainsJSON);
For CSV:
var data = d3.csv.parseRows(JavascriptStringVariableThatContainsMyCSVdata);
//then add data to the graph and call enter, something like:
var dataEnter = svg.selectAll("rect").data(data).enter();
d3.csv tries to fetch over http/https.
You need to read the file first then use d3.csvParse on the content (in string format).
A simple example in node:
import * as d3 from "d3";
import * as fs from "fs";
const csv = fs.readFileSync("./data/data.csv", "utf8");
const data =d3.csvParse(csv);
console.log(data);
I'd like to call a Python function from JavaScript code, because there isn't an alternative in JavaScript for doing what I want. Is this possible? Could you adjust the below snippet to work?
JavaScript code:
var tag = document.getElementsByTagName("p")[0];
text = tag.innerHTML;
// Here I would like to call the Python interpreter with Python function
arrOfStrings = openSomehowPythonInterpreter("~/pythoncode.py", "processParagraph(text)");
~/pythoncode.py contains functions using advanced libraries that don't have an easy to write equivalent in JavaScript:
import nltk # is not in JavaScript
def processParagraph(text):
...
nltk calls
...
return lst # returns a list of strings (will be converted to JavaScript array)
All you need is to make an ajax request to your pythoncode.
You can do this with jquery http://api.jquery.com/jQuery.ajax/, or use just javascript
$.ajax({
type: "POST",
url: "~/pythoncode.py",
data: { param: text}
}).done(function( o ) {
// do something
});
From the document.getElementsByTagName I guess you are running the javascript in a browser.
The traditional way to expose functionality to javascript running in the browser is calling a remote URL using AJAX. The X in AJAX is for XML, but nowadays everybody uses JSON instead of XML.
For example, using jQuery you can do something like:
$.getJSON('http://example.com/your/webservice?param1=x¶m2=y',
function(data, textStatus, jqXHR) {
alert(data);
}
)
You will need to implement a python webservice on the server side. For simple webservices I like to use Flask.
A typical implementation looks like:
#app.route("/your/webservice")
def my_webservice():
return jsonify(result=some_function(**request.args))
You can run IronPython (kind of Python.Net) in the browser with silverlight, but I don't know if NLTK is available for IronPython.
Communicating through processes
Example:
Python: This python code block should return random temperatures.
# sensor.py
import random, time
while True:
time.sleep(random.random() * 5) # wait 0 to 5 seconds
temperature = (random.random() * 20) - 5 # -5 to 15
print(temperature, flush=True, end='')
Javascript (Nodejs): Here we will need to spawn a new child process to run our python code and then get the printed output.
// temperature-listener.js
const { spawn } = require('child_process');
const temperatures = []; // Store readings
const sensor = spawn('python', ['sensor.py']);
sensor.stdout.on('data', function(data) {
// convert Buffer object to Float
temperatures.push(parseFloat(data));
console.log(temperatures);
});
Typically you would accomplish this using an ajax request that looks like
var xhr = new XMLHttpRequest();
xhr.open("GET", "pythoncode.py?text=" + text, true);
xhr.responseType = "JSON";
xhr.onload = function(e) {
var arrOfStrings = JSON.parse(xhr.response);
}
xhr.send();
You cannot run .py files from JavaScript without the Python program like you cannot open .txt files without a text editor. But the whole thing becomes a breath with a help of a Web API Server (IIS in the example below).
Install python and create a sample file test.py
import sys
# print sys.argv[0] prints test.py
# print sys.argv[1] prints your_var_1
def hello():
print "Hi" + " " + sys.argv[1]
if __name__ == "__main__":
hello()
Create a method in your Web API Server
[HttpGet]
public string SayHi(string id)
{
string fileName = HostingEnvironment.MapPath("~/Pyphon") + "\\" + "test.py";
Process p = new Process();
p.StartInfo = new ProcessStartInfo(#"C:\Python27\python.exe", fileName + " " + id)
{
RedirectStandardOutput = true,
UseShellExecute = false,
CreateNoWindow = true
};
p.Start();
return p.StandardOutput.ReadToEnd();
}
And now for your JavaScript:
function processSayingHi() {
var your_param = 'abc';
$.ajax({
url: '/api/your_controller_name/SayHi/' + your_param,
type: 'GET',
success: function (response) {
console.log(response);
},
error: function (error) {
console.log(error);
}
});
}
Remember that your .py file won't run on your user's computer, but instead on the server.
Despite what some replies and comments suggest, there are a number of ways for using Python on the front-end. For your question in particular, see this reply.
I have a data fetching method that uses jQuery.ajax() to fetch xml files.
/* */data: function() {
/* debug */try {
var url = arguments[0] ;
var type = arguments[1] ;
var scope = arguments[2] ;
var callback = arguments[3] ;
var self = this ;
if(this.cache[url]) {
callback(this.cache[url]) ;
} else if(!this.cache[url]) {
$.ajax({
type: "GET" ,
url: url ,
dataType: type ,
cache: false ,
success: function(data) {
if(type == "text/xml") {
var myJson = AUX.json ;
var jsonString = myJson.build(data,scope,null) ;
var jsonObject = $.parseJSON(jsonString) ;
self.cache[url] = jsonObject ;
callback(url) ;
} else if(type == "json") {
self.cache[url] = data ;
callback(url) ;
}
} ,
error: function() {
throw "Ajax call failed." ;
}
}) ;
}
/* debug */} catch(e) {
/* debug */ alert("- caller: signTutor.data\n- " + e) ;
/* debug */}
} ,
My problem is: jQuery somehow adds a parameter (?_=1272708280072) to the url if there are escaped (hexadecimal notation) or unescaped utf-8 characters outside of the ASCII range -- i believe -- in the file name. It all works well if the file name does not contain characters in that range.
Type is set to xml so there should not be a confusion of types. Headers of the xml files are also set adequately.
I can see from the console that jQuery throws an error, but I'm not sure as to where the problem really is.
Probably a problem with file name formatting, but I did not find any resources on the web as to AJAX file name specifications. Any ideas?
Thanks for you help!
That is a 'cache-buster' and is ignored.
The added parameter changes the url just enough to bypass most all caches that are between you and the source.
If the Url was not modified, it is likely that data would be served from any one of the caches between you and the resource, including your browser, any proxies, and perhaps the server itself.
You can find a lot of explanations on the net. Here is one.
it should be ignored.
Just to make a test, if you are using rails, don't use the javascript_include_tag but pass the JavaScript as
<script src="/path/for/the/script/script.js" type="text/javascript"></script>
It won't enable the cache-buster and with that you can see if your problem is where you think that it is.