The "console-log(states)" line in he HTML File returns an "undefined".
Does anyone know why?
My goal here is to store the data from the JSON-File in a JavaScript-Variable.
The result should be a list that contains 3 dictionaries.
Both files are in the same directory.
Thanks a lot for any help!
HTML-File
<html>
<head>
<script type="text/javascript" src="states_Ex1.json"></script>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<script> var states=states_Ex1.json</script>
<script>
console.log(states) // --> undefined
</script>
</body>
</html>
JSON-File
[
{
"gene1": true,
"gene2": true,
"nextStateIndex": 1
},
{
"gene1": true,
"gene2": false,
"nextStateIndex": 2
},
{
"gene1": true,
"gene2": true,
"nextStateIndex": 1
}
]
New Answer
I've found a series of answers here for accessing local JSON files.
I tried #seppoo0010's method and it works on my end. Give it a shot:
$.getJSON("your-path-to-file.json", function(states) {
console.log(states); // this will show the info it in firebug console
});
You'll need to parse the JSON. Try this:
...
var states = JSON.parse(states_Ex1.json)
...
Related
const net = new brain.NeuralNetwork();
net.train([
{
input: [0, 0]
output: [0]
},
{
input: [1, 0]
output: [1]
},
{
input: [0, 1]
output: [1]
},
{
input: [1, 1]
output: [0]
}
])
const diagram = document.getElementById('diagram')
diagram.innerHTML = brain.utilities.toSVG(net)
This should show me the neural network diagram but it doesn't I do have the HTML all set up and it's supposed to be working correctly but when I run it first it loads for longer than usual code does but I suppose its because I'm working with more complex stuff than usual and well I just get a blank screen so I would like if someone would help me out by telling me what the problem is
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Storm</title>
<script src="//unpkg.com/brain.js" defer></script>
<script src="index.js" defer> </script>
</head>
<body>
<div id="diagram">Diagram </div>
</body>
</html>
Your import is this:
<script src="//unpkg.com/brain.js" defer></script>
But needs to be this:
<script src="https://unpkg.com/brain.js#1.0.0-rc.3/browser.js"></script>
https:// implies it will download it from a website, whereas yours
// implies it will look on your local machine (your computer) for the file.
Since you didn't download the file, it won't load anything.
Maybe you want to use a different package, but the main issue is the import.
I'm trying to figure out if BokehJS can meet my plotting needs for a minor dev project. When I try to copy the last example found on https://docs.bokeh.org/en/latest/docs/user_guide/bokehjs.html it fails with this backtrace in Chrome:
Uncaught TypeError: Cannot read property 'classList' of null
at c (bokeh-1.3.4.min.js:31)
at Object.n.add_document_standalone (bokeh-1.3.4.min.js:31)
at Object.t.show (bokeh-api-1.3.4.min.js:31)
at bokeh.html:58
The example is copied verbatim into a file, bokeh.html, and opened directly in the browser. bokeh.html:58 is the line
Bokeh.Plotting.show(plot);
The example is supposed to be a complete standalone html file so I must be missing something obvious here. My copy of the example can be found here https://pastebin.com/VizzJbH4
Any hints are greatly appreciated.
Move script tag with code at the end instead of head tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Complete Example</title>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.1.1.min.js" integrity="sha384-kLr4fYcqcSpbuI95brIH3vnnYCquzzSxHPU6XGQCIkQRGJwhg0StNbj1eegrHs12" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.1.1.min.js" integrity="sha384-xIGPmVtaOm+z0BqfSOMn4lOR6ciex448GIKG4eE61LsAvmGj48XcMQZtKcE/UXZe" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.1.1.min.js" integrity="sha384-Dc9u1wF/0zApGIWoBbH77iWEHtdmkuYWG839Uzmv8y8yBLXebjO9ZnERsde5Ln/P" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.1.1.min.js" integrity="sha384-cT9JaBz7GiRXdENrJLZNSC6eMNF3nh3fa5fTF51Svp+ukxPdwcU5kGXGPBgDCa2j" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.1.1.min.js" integrity="sha384-i2RsfqLVG6PTrWCD55m8pYN9N2XZRkYVASzqjzp79o0OpPmcp+APyuwCfItW7Kn2" crossorigin="anonymous"></script>
<script>
//The order of CSS and JS imports above is important.
</script>
</head>
<body>
</body>
<script>
// create a data source to hold data
var source = new Bokeh.ColumnDataSource({
data: { x: [], y: [] }
});
// make a plot with some tools
var plot = Bokeh.Plotting.figure({
title:'Example of Random data',
tools: "pan,wheel_zoom,box_zoom,reset,save",
height: 300,
width: 300
});
// add a line with data from the source
plot.line({ field: "x" }, { field: "y" }, {
source: source,
line_width: 2
});
// show the plot, appending it to the end of the current section
Bokeh.Plotting.show(plot);
function addPoint() {
// add data --- all fields must be the same length.
source.data.x.push(Math.random())
source.data.y.push(Math.random())
// notify the DataSource of "in-place" changes
source.change.emit()
}
var addDataButton = document.createElement("Button");
addDataButton.appendChild(document.createTextNode("Add Some Data!!!"));
document.currentScript.parentElement.appendChild(addDataButton);
addDataButton.addEventListener("click", addPoint);
addPoint();
addPoint();
</script>
</html>
I'm trying to build a basic chart using the Chart.js JavaScript framework. I believe I have everything completely the way it should be given an example I've been following, however it will not generate the chart (or anything) in any browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ChartJS Analytic</title>
<script id="src/chart.js"></script>
</head>
<body>
<div id="center"><canvas id="lineChart"></canvas></div>
<script>
var lineChartData = {
labels : ["2010","2011","2012","2013"],
datasets : [{
data : [150,200,250,150]
}, {
data : [200,170,150,200]
}]
};
var lineChart = document.getElementById('lineChart').getContext('2d');
new Chart(lineChart).Line(lineChartData);
</script>
</body>
</html>
I am using WebStorm and no errors or warnings are detected. Can anyone tell me what the issue is here?
The problem lied in the line with new Chart(lineChart)...
This is incorrectly referenced in modern Chart.js. That line should look like this:
var myLineChart = Chart.Line(lineChart, {
data: lineChartData,
options: lineOptions
});
This is what I want:
I want to add or remove countries from a 'countries.json' file, which stored in my local. This is just a test to understand json. Please help me.
<html>
<head>
<title></title>
</head>
<body>
<select name="countries" id="countries"></select>
</body>
<script src="dropdown.js"></script>
</html>
Got the answer:
This is how I loaded json using my js:
$(function() {
$('#countries').click(function(){
$.getJSON('dropdown.json', function(data) {
countries = data['countries']
$.each(countries, function(id, country) {
$('select').append('<option value="">' + country["countryName"]+'</option>')
})
});
})
})
I am new with json and ajax. I would to ask for assistance on how to Retrieve JSON value using AJAX.
Here is my json file named as list.js
{
"loginid" : "Wafiqa",
"password": "123"
}
and here is my html fille named as ajaxTest.html
<body>
<p> Username: </p>
<div id="uname"></div>
<p> Password: </p>
<div id="pword"></div>
</body>
What I want to do is the value from username in json file will be displayed at uname div and the password will display at pword div. How can I do that?
Once you're just starting to learn JavaScript, it would be easier for you to just put your JSON data in a variable.
var jsonData = {
"loginid" : "Wafiqa",
"password": "123"
};
and then you insert it in the DOM with something like
document.getElementById(uname).innerHTML = jsonData.loginid;
document.getElementById(pword).innerHTML = jsonData.password;
If you want to use the json in another file you should serve it as a static asset or use some server-side code to render it.
You cannot access a local file. You will need the json file to be served from a server. You can run your code form a web server.
You can use the jquery#getJSON function for this.
For sample, in your html head section have
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.getJSON demo</title>
<style>
img {
height: 100px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="images"></div>
<script>
(function() {
$.getJSON( 'http://date.jsontest.com/', {
format: "json"
})
.done(function( data ) {
alert(data.date);
});
})();
</script>
</body>
</html>