-3

I have created a JSON file with variable in it . But I am unable to assign the value to variable from JSON.

My HTML file is :--

<div class="col-xs-9 text-right">
 <div class="huge">
    <p id="demo"></p>
 </div>
 <div>Total</div>
</div>

My Javascript is :-- 

<script>
      var text = 'http://localhost:8080/SampleGUI/total.txt';
      var obj = JSON.parse('text');
      document.getElementById("demo").innerHTML = obj.total; 

</script>

And my JSON is :--

  {
     "text": {
      "total":"19838"
  }

}

I keep getting invalid character error for my HTML variable assignment .

Can you please help me with same ?

Regards.

user2854333
  • 640
  • 6
  • 20
  • 1
    You are not parsing the text into your JSON.parse.... please check http://stackoverflow.com/a/21446426/1170430 – lukesUbuntu Apr 14 '15 at 04:03

3 Answers3

0

Shouldn't it be: 

 document.getElementById("demo").innerHTML = obj.text.total;
Phoenix
  • 335
  • 2
  • 9
0

When you say

var obj = JSON.parse('text');

you are parsing the string "text" which is not valid JSON.

For example:

$ node
> JSON.parse("text")
SyntaxError: Unexpected token

Maybe you meant to parse the JSON string inside the variable named text, so remove the quotes.

This should set you in the right direction:

$ node
> var text = '{ "text": { "total": "19838" } }'
undefined
> JSON.parse(text).text.total
'19838'
Ray Toal
  • 86,166
  • 18
  • 182
  • 232
  • I tried to look at various options. But since I am new to HTML and JSON , I was unable to fix it . – user2854333 Apr 14 '15 at 04:00
  • I tried that but it still fails with same error . var text = 'http://localhost:8080/SampleGUI/total.txt'; var obj = JSON.parse(text).text.total; document.getElementById("demo").innerHTML = obj.text.total; – user2854333 Apr 14 '15 at 04:05
  • @RayToal Sure, he should not be doing `JSON.parse("text")`. But the more fundamental problem is that even if he changes this to `JSON.parse(text)`, `text` will not be the desired object from the server because he doesn't know how AJAX works. –  Apr 14 '15 at 04:44
0

Since your trying to get the file you may want to use XMLHttpRequest to retrieve so something like this could do "untested:

var xmlhttp = new XMLHttpRequest();
var url = "http://localhost:8080/SampleGUI/total.txt";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log("response",xmlhttp.responseText);
        var obj = JSON.parse(xmlhttp.responseText);
        document.getElementById("demo").innerHTML = obj.text.total; 
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

If your using jquery something like this

$.getJSON("http://localhost:8080/SampleGUI/total.txt", function(data) {

    $("#demo").text = data.text.total; 
});

I have attached a jsfiddle of working http://jsfiddle.net/nk0ynou1/

lukesUbuntu
  • 527
  • 2
  • 12
  • 22
  • Where are we defining the variable obj in jquery . Should it be defined as the global variable ? – user2854333 Apr 14 '15 at 04:17
  • Thanks Luke. I don't get error anymore . But the HTML is still not displaying the value for demo . It comes blank. – user2854333 Apr 14 '15 at 04:21
  • whats the exact contents of your json file? To make sure you are receiving the correct data i would add console.log("response",xmlhttp.responseText); so you can see what is been parsed by JSON.parse – lukesUbuntu Apr 14 '15 at 04:25
  • My exact JSON content is { "text": { "total":"19838" } } and I am trying to store the value in variable demo so that I can get it printed within html. – user2854333 Apr 14 '15 at 04:33
  • Here i have uploaded a jsfiddler version of it working http://jsfiddle.net/lukesUbuntu/nk0ynou1/3/ – lukesUbuntu Apr 14 '15 at 04:38