HTML doesn't accept colon(:) inside json

Question

My json file looks like this:

{
    "data": {
        "test":"0123"
    }
}

And I get this error: Uncaught SyntaxError: Unexpected token ':'

Why does this happen and how can I fix the problem?

Edit: the HTML code

<html>
    <body>
        <button id="clickThis" onclick="change()">
            Text here
        </button>
        
        <script type="text/javascript" src="./lista.json">
            function change() {
                var mydata = JSON.parse(data)
                document.getElementById("clickThis").innerHTML = "this"
            }
        </script>
    </body>
</html>

<html>
    <body>
        <button id="clickThis">
            Text here
        </button>
        <script src="./lista.json">
        </script>
    </body>
</html>

What do you mean "HTML doesn't accept"? HTML doesn't inherently parse JSON for the same reason C compilers don't inherently parse Python. How are the two connected? — Silvio Mayolo, Nov 14 '21 at 22:48
an array within in a string needs to be escaped by square brackets. https://newbedev.com/how-do-you-represent-a-json-array-of-strings — Dorvalla, Nov 14 '21 at 22:52
[The JSON is fine](https://jsfiddle.net/4md8hys0/) , we have no idea of what the surrounding HTML is or any other context. THis could be IDE specific. — Jon P, Nov 14 '21 at 22:52
Other things of note... you say "Your json file", yes it has a "html" extention. It should be ".js" — Jon P, Nov 14 '21 at 22:55
On a different note, i dont think printing simply a variable in your console confirms the JSON is fine. I prefer to check it through something else. https://jsonlint.com/ .. also see this. https://stackoverflow.com/questions/52783174/valid-json-without-brackets-and-ids — Dorvalla, Nov 14 '21 at 22:58
@SilvioMayolo You're rigth, it's probably the browser or inspector(?), I just never had this error using other programming languages, so I assumed it's an HTML thing (for some reason). — Ray, Nov 14 '21 at 22:59
@JonP I edited the HTML code to the question, it's nothing special. — Ray, Nov 14 '21 at 23:02
@Dorvalla, even using jsonlint, it is valid JSON. You only need `[]` for an array, there is no indication an array is needed here. An object is a perfectly valid value for a property. — Jon P, Nov 14 '21 at 23:02
Script tags either include a block of code, or a reference to an external resource **NOT** both — Jon P, Nov 14 '21 at 23:05
@JonP That explains why the change() function doesn't work, but I still have the error, even if I remove the type and the function. As soon as I have the reference, the error occurs. — Ray, Nov 14 '21 at 23:09
You also only need `JSON.parse` if you are parsing a string representation of JSON , eg `'{"prop": 23 }'"` not a native JSON object `{"prop": 12}` — Jon P, Nov 14 '21 at 23:11
@JonP These are really good tips, and I really appreciate them, but they don't really solve the main problem. — Ray, Nov 14 '21 at 23:15

Serge · Accepted Answer · 2021-11-15T15:31:22.770

You can try use src= on older versions of html, but HTML5 doesn't load json content into html.

From the HTML5 specification:

When used to include data blocks (as opposed to scripts), the data must be embedded inline, the format of the data must be given using the type attribute, the src attribute must not be specified, and the contents of the script element must conform to the requirements defined for the format used.

So I recommend to use this code. It was tested in Visual Studio and working properly (you maybe need to correct json path, since I don't know where it is in your web application)

<script type="text/javascript">
            
 $.getJSON('content/lista.json', function(json) {
   var test= JSON.stringify(json.data.test); 
     alert(test);
   });

</script>

it is using ajax to get json from server. But src= also send request to the server or to another website even to get resource and it works slower then ajax.

HTML doesn't accept colon(:) inside json

1 Answers1