Reading JSON from <script> Tag - javascript

How can I get JSON data embedded in a script tag?
<!DOCTYPE html>
<html>
<head>
<script id="data" type="application/json">{org: 10, items:['one','two']}</script>
<script type="text/javascript">
var obj = JSON.parse( document.getElementById('data').value );
console.log( obj );
console.log( obj.org );
</script>
</head>
<body>
</body>
</html>
I'm getting:
Uncaught SyntaxError: Unexpected token u in JSON at position 0


<script> elements are not form controls. They don't have value properties (so. when you read it, you get undefined which is "undefined" when cast to a string, and that isn't valid JSON).
Read the content of the text node inside the element instead.
You also need to write JSON instead of a JavaScript object literal.
Property names must be strings, not identifiers.
Strings must be quoted with " not '.
<script id="data" type="application/json">{"org": 10, "items":["one","two"]}</script>
<script type="text/javascript">
var obj = JSON.parse(document.getElementById('data').firstChild.data);
console.log(obj);
console.log(obj.org);
</script>


The u comes from "undefined". Try:
JSON.parse( document.getElementById('data').innerHTML );
...but keep in mind that your current input is not JSON. So correctly formatted it would be:
<script id="data" type="application/json">{"org":10,"items":["one","two"]}</script>

Related

Output of decodeURIComponent cannot be parsed by JSON.parse()?

Why doesn't the following work?
<!DOCTYPE html>
<html>
<body>
<script>
var str="{"bmi":"25.25"}";
var unesc = decodeURIComponent(str);
document.write(unesc);
var obj = JSON.parse(unesc);
document.write(JSON.stringify(obj));
</script>
</body>
</html>
https://jsfiddle.net/p4c4q6q1/1/
Looks like JSON.parse() is not liking the output of decodeURIComponent() for some reason. If I manually replace the string reference with the actual string then JSON.parse() works.

the JSON works but print an error in console

I want to show Json data when the href text is clicked.it works but whenever I clicked the href text the console prints "Uncaught SyntaxError: Unexpected token :" in file data.json. why this is happening? I have validate the code in JSONLint.
file:index. html
<html>
<head>
<script src="data.json"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<h1 id="title">Using jQuery to retrieve Json via Ajax</h1>
Get JSON data
</body>
<script>
$(function(){
$("#clickme").click(function(){
$.getJSON("data.json",function(data){
var items=[];;
$.each(data,function(key,val){
items.push('<li id="'+key+'">'+val+'</li>');
});
console.log(items);
$("<ul/>",{
"class":"interest-list",
html:items.join("")
}).appendTo("body");
});
});
});
</script>
</html>
file:data.json
{
"one":"pikachu is awesome",
"two":"squirtle is awesome"
}

The problem is in your data.json file:
you must change your json like this (using [ ] ):
[
{
"one":"pikachu is awesome",
"two":"squirtle is awesome"
}
]
then you must change your js code to use data[0] instead of data:
$.each(data[0],function(key,val){
items.push('<li id="'+key+'">'+val+'</li>');
});
this prevent the console error and all works fine.
p.s.: i suggest to remove the unnedded ; in line 14:
var items=[];;
to
var items=[];

correctly write in javascript a value received from a bean

I need to pass a value from a bean into a JavaScript part of a HTML page
<script language="javascript" for="obj" event="ControlInitialized>
obj.URL = #{myBean.ObjectURL};
</script>
where #{myBean.ObjectURL} is :
http://localhost:8080/project/descript.xsd

Always, always look at the generated output.
obj.URL = http://localhost:8080/project/descript.xsd;
Notice anything missing?
obj.URL = "http://localhost:8080/project/descript.xsd";

It must be a string:
<script language="javascript" ">
objURL = "#{myBean.ObjectURL}";
</script>

Try this:
<script language="javascript" > //Remove the extra quote
obj.URL = "#{myBean.ObjectURL}"; // Put it in quotes
</script>

Pass Variable To Auto Complete JavaScript

I have this basic auto complete JavaScript that works well, but you need to hard code the web page. What I'm trying to do is send the "Autocomplete" variable data to the page using a Perl script
The working JavaScript code looks like this:
var CustomArray = new Array('an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML');
Now the new code is:
var CustomArray=new Array(Autocomplete);
And the Perl script is sending back the data to the browser looking like this:
var Autocomplete = 'an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfish er','kingpin','SML'
I also tried
var Autocomplete = ['an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML']
But I get: 'an apple','alligator','elephant','pear','kingbird','kingbolt','kingcraft','kingcup','kingdom','kingfish er','kingpin','SML' All as one string in the auto complete.
I cant seem to get it to work right. Full HTML code is below.
<html>
<head>
<script language="javascript" type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Autocomplete.js"></script>
<script language="javascript" type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Common.js"></script>
<script language="JavaScript1.2" type="text/javascript" src="http://www.ComicInvasion.com/cgi-bin/Autocomplete.pl"></script>
<script>
var CustomArray=new Array(Autocomplete);
</script>
</head>
<body>
<input type='text' style='font-family:verdana;width:300px;font-size:12px' id='ACMP' value=''/>
<script>
var obj = actb(document.getElementById('ACOMP'),CustomArray);
</script>
</body>
</html>

First, it looks like there is a typo. The id of your input element is ACMP whereas you pass 'ACOMP' to getElementById.
Second, you do not provide the source code for your Perl script. It might look like this:
#!/usr/bin/perl
use utf8;
use strict; use warnings;
use CGI();
local $| = 1;
print CGI::header(
-type => 'text/javascript',
-charset => 'utf-8',
);
print <<JS;
var Autocomplete = [
'an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML'
];
JS
With the following HTML, autocompletion works:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://www.comicinvasion.com/Code/Java/Autocomplete/Autocomplete.js"></script>
<script type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Common.js"></script>
<!-- Replace with the URI of your script -->
<script type="text/javascript" src="http://test:8080/cgi-bin/autocomplete.pl"></script>
</head>
<body>
<input type='text'
style='font-family:verdana;width:300px;font-size:12px'
id='ACOMP' value=''>
<script type="text/javascript">
var obj = actb(document.getElementById('ACOMP'), Autocomplete);
</script>
</body>
</html>
Finally, I find it curious that your JavaScript files live in a directory called Java.

Have the perl script return this:
var CustomArray = "an apple, alligator".split(',');
Or, if it has to be this it's okay too:
var CustomArray = "'an apple','alligator'".split(',');
Obviously, I omitted the rest of the items in there but you'd include all of them.

Trying to parse xml file for javascript quiz

I am trying to create a javascript quiz, that gets the questions from a xml file. At the moment I am only starting out trying to parse my xml file without any success. Can anyone point me to what I am doing wrong?
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<div class="spmArr">
</div>
<script type="text/javascript">
var quizXML = '<quiz><Sporsmal tekst="bla bla bla"/><alternativer><tekst>bla</tekst><tekst>bli</tekst><tekst correct="yes">ble</tekst></alternativer><Sporsmal tekst="More blah"/><alternativer><tekst>bla bla</tekst><tekst correct="yes">bli bli</tekst><tekst>ble ble</tekst></alternativer></quiz>'
var quizDOM = $.xmlDOM( quizXML );
quizDOM.find('quiz > Sporsmal').each(function() {
var sporsmalTekst = $(this).attr('tekst');
var qDiv = $("<div />")
.addClass("item")
.addClass("sporsmal")
.appendTo($(".spmArr"));
var sTekst = $("<h2/>")
.html(sporsmalTekst)
.appendTo(qDiv);
});
</script>
</body>
</html>
When I try this in my browser the classes and div are not being created. And the page is just blank. Am i doing something wrong when I intialize the xml?
edited to add prototype.js and close function

Looks like you're forgetting to close your .each call. append ); after the statement for sTekst and your call will parse correctly.

Categories