Why did the JavaScript engine return a syntax error when there is no error in my JSON code?

Question

I am creating an application that will list all of the names, ages, Genders, on a web page. The data returned by the server is in JSON format. Everything looks fine, but when the Show Family Info button is clicked, it gives me this error:

SyntaxError: Unexpected token o in JSON at position 1

After getting that error, I went to my JSON file and checked to see if there is any error that I might have, but I find none. There is no "o" in the first position.

So I'm not sure where the error came from.

Here is my HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        Fetch API
    </title>
</head>

<body>
    <p id="demo">
    </p>
    <button onclick="showFamilyInfo()">
        Show Family Info
    </button>

    <script>
        let arrayForData = [];

        function showFamilyInfo(){
            fetch('users.json')
            .then(function(response){
                response.json()
                .then(function(data){
                    let parseData = JSON.parse(data);
                    parseData.forEach(function(element){
                        for(let i of parseData[element]){
                            arrayForData.push(`'
                            <p>
                                ${i}: ${i.FirstName}
                                ${i}: ${i.LastName}
                                ${i}: ${i.Age}
                                ${i}: ${i.Gender}
                            </p>
                            '`);
                        }
                    });
                    document.getElementById('demo').innerHTML = arrayForData.join();
                })
                .catch(function(error){
                    document.getElementById('demo').innerHTML = error;
                });
            });
        }
    </script>
</body>

</html>

And here is my JSON code:

[
    {
    "FirstName":"Toby",
"LastName":"Harnish",
"Age":17,
"Gender":"Male"
},
{
    "FirstName":"Kelly",
"LastName":"Harnish",
"Age":51,
"Gender":"Female"
},
{
    "FirstName":"Dale",
    "LastName":"Harnish",
    "Age":57,
    "Gender":"Male"
},
{
    "FirstName":"Avery",
    "LastName":"Harnish",
    "Age":23,
    "Gender":"Male"
},
{
    "FirstName":"Annie",
    "LastName":"Harnish",
    "Age":16,
    "Gender":"Female"
},
{
    "FirstName":"Benjimin",
    "LastName":"Harnish",
    "Age":16,
    "Gender":"Male"
},
{
    "FirstName":"Wesley",
    "LastName":"Harnish",
    "Age":16,
    "Gender":"Male"
},
{
    "FirstName":"Clara",
    "LastName":"Harnish",
    "Age":14,
    "Gender":"Female"
},
{
    "FirstName":"Bobby",
    "LastName":"Harnish",
    "Age":15,
    "Gender":"Male"
    },
    {
        "FirstName":"Olivia",
        "LastName":"Harnish",
        "Age":20,
        "Gender":"Female"
    },
{
    "FirstName":"Timmy",
    "LastName":"Harnish",
    "Age":19,
    "Gender":"Male"
}
]

JSON.parse() is expecting a JSON string as a parameter to parse it to a JavaScript object/array, but here you already have the Array generated from response.json(), you don't need to parse it, you can use it directly. — Zac, Aug 28 '21 at 22:17
`response.json()` parses the data for you already, `let parseData = JSON.parse(data); parseData.forEach(` should be a simple `data.forEach(`. The particular letter `o` the message talks about is that as `data` is a JavaScript array of objects already, it's stringified to `[object Object],[object Object]...`, which `JSON.parse()` starts processing as an array, `[`, but then finds an unexpected letter. — tevemadar, Aug 28 '21 at 22:24
@Zac, if this is true, it shouldn't return TypeError: parseData[element] is not iterable. It should return the parsed JSON instead. Since JS object is iderable. — , Aug 28 '21 at 22:46
JS Object is not iterable, well you can customize it to be iterable but it's not by default, however, from what I see in your code, you don't need to loop over the object keys, you are already looping over objects in the returned array in `.forEach(function(element){` here you have each object in `element` on each iteration, you can directly use it to access its keys (ie. element.FirstName), no need for the internal for-of `for(let i of parseData[element]){ ` loop — Zac, Aug 28 '21 at 23:16
I would encourage you to improve debugging & tracing skills so you can understand the code and its actual behavior more. you can start using `console.log` to check the value on each step, also I would recommend reading more (MDN is a good referrence for example) about any part in JS that you think it's not working as expected to understand it more — Zac, Aug 28 '21 at 23:24

score 1 · Answer 1 · edited Sep 04 '21 at 05:57

1

response.json won't return a string. Instead it returns an object, so you don’t need to parse it. Use it as it is.

edited Sep 04 '21 at 05:57

Peter Mortensen

30,738
21
105
131

answered Aug 28 '21 at 22:24

shahrooz bazrafshan

545
4
17

this is not true. response.json() returns a Promise. – Aug 28 '21 at 23:00
@Toby Still, a promise for the parsed object, not for the string. (And to nitpick, a promise is an object :P) – Bergi Aug 28 '21 at 23:20

Why did the JavaScript engine return a syntax error when there is no error in my JSON code?

1 Answers1