Loop through JSON array: uncaught syntax error, uncaught reference error

Question

I'm still new to JQuery and I'm trying to use it to iterate through a JSON array and update my webpage with the data in the array.

The JSON file looks like this:

[
    {
        "firstname":"John",
        "lastname":"Doe",
        "studentnumber":"666"
    },
    {
        "firstname":"Foo",
        "lastname":"Bar",
        "studentnumber":"777"
    }
]

My HTML document looks like this:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="jquery-2.2.3.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                console.log('ready');
                $.getJSON('us.json', function(data){
                    $.each(JSON.parse(data), function(key, value){
                       $.each(value, function(index, member){
                            html += '<div class="member">';
                            html += '<h4>' + member.firstname + ' ' + member.lastname +'</h2>';
                            html += '<p>' + 'has the following member number:' + member.studentnumber + '</p>';
                            html += '</div>';
                            console.log(html)
                        })
                    });
                    $('#members').html(html);
                });
            });
        </script>
    </head>

    <body>
        <div>
            <h3>Members</h3>
        </div>
        <div id="members"></div>
    </body>
</html>

You can see that I'm trying to use the .each function to accomplish this task. The above code is giving the following error:

VM2028:1 Uncaught SyntaxError: Unexpected token o
(anonymous function) @ index-v1.html:10
fire                 @ jquery-2.2.3.js:3187
self.fireWith        @ jquery-2.2.3.js:3317
done                 @ jquery-2.2.3.js:8785
(anonymous function) @ jquery-2.2.3.js:9151

After looking at some previous questions here, I tried replacing JSON.parse(data) with just data, and this resulted in the following error:

Uncaught ReferenceError: html is not defined
(anonymous function) @ index-v1.html:12
jQuery.extend.each   @ jquery-2.2.3.js:371
(anonymous function) @ index-v1.html:11
jQuery.extend.each   @ jquery-2.2.3.js:365
(anonymous function) @ index-v1.html:10
fire                 @ jquery-2.2.3.js:3187
self.fireWith        @ jquery-2.2.3.js:3317
done                 @ jquery-2.2.3.js:8785
(anonymous function) @ jquery-2.2.3.js:9151

What could be causing these problems and how do I fix them?

"After looking at some previous questions here, I tried replacing JSON.parse(data) with just data" — Err… so you've fixed the problem in your question title already… — Quentin, Apr 27 '16 at 06:10
@Quentin You're right, the title is poorly worded. I'll edit it now. — JavascriptLoser, Apr 27 '16 at 06:11

score 3 · Accepted Answer · edited May 23 '17 at 10:28

3

Cause of error: JSON.parse() expects a text but object is passed.(Thanks to @Rayon)

As data is already in JSON format, there is no need of using JSON.parse() on it.

$.getJSON('us.json', function(data){

    // Problem is here
    $.each(JSON.parse(data), function(key, value) {

Don't parse data

$.getJSON('us.json', function(data) {
    $.each(data, function(key, value) {

For second error

Uncaught ReferenceError: html is not defined

Define html variable before using it.

var html = ''; // Add before `each`.

Also, there is no need of nested each as the data passed in first each is already member object. Here's code written using Array#forEach.

$.getJSON('us.json', function (data) {
    var html = '';
    data.forEach(function(member) {
        html += '<div class="member">';
        html += '<h4>' + member.firstname + ' ' + member.lastname + '</h2>';
        html += '<p>' + 'has the following member number:' + member.studentnumber + '</p>';
        html += '</div>';
    });

    $('#members').html(html);
});

edited May 23 '17 at 10:28

Community

1
1

answered Apr 27 '16 at 05:51

Tushar

85,780
21
159
179

1

Cause of error: _`JSON.parse` expects a `text` but `object` is passed.._ – Rayon Apr 27 '16 at 05:52
@Rayon Thanks. Added. – Tushar Apr 27 '16 at 05:56
This has fixed the errors that were occurring, thank you. However it seems your code skips over the first object in the JSON array. What could be the reason for this? – JavascriptLoser Apr 27 '16 at 05:57
@PythonNewb Can't say from here, can you check if there is any error in browser console? Also check in ELEMENTS tab if the first item is hidden or misplaced. – Tushar Apr 27 '16 at 05:59
@Tushar There are no errors and it doesn't seem like any elements are hidden. However I added a `console.log()` statement and found that both objects were logged to the console. Could it be because the first element is overwritten by the second one? They both have the same html class. – JavascriptLoser Apr 27 '16 at 06:03
"already return data in JSON format. There is no need of converting it to JSON " — No. It gets JSON and then it parses it into JavaScript objects/arrays/strings/etc. Parsing JSON doesn't turn something into JSON, it does the opposite of that. – Quentin Apr 27 '16 at 06:04

Loop through JSON array: uncaught syntax error, uncaught reference error

1 Answers1