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
– Quentin, Commented Apr 27, 2016 at 6:10
@Quentin You're right, the title is poorly worded. I'll edit it now. — JavascriptLoser
– JavascriptLoser, Commented Apr 27, 2016 at 6:11

Community · Accepted Answer · 2017-05-23 10:28:11Z

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, 2017 at 10:28

CommunityBot

11 silver badge

answered Apr 27, 2016 at 5:51

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rayon Over a year ago

Cause of error: JSON.parse expects a text but object is passed..

Tushar Over a year ago

@Rayon Thanks. Added.

JavascriptLoser Over a year ago

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?

Tushar Over a year ago

@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.

JavascriptLoser Over a year ago

@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.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related