Read json file with jquery in javascript

Question

I am trying to readed json file in jquery with javascript. What is my wrong with this code

$(function() {
  var new4 = [];
  $.getJSON('new4.json', function(data) {
    $.each(data.new4, function(i, f) {
        var tblRow = "<tr>" + "<td>" + f.FirstName + "</td>" +
          "<td>" + f.LastName + "</td>" + "<td>" + f.EmailAddress + "</td>" + "<td>" + f.City + "</td>" + "</tr>"
        $(tblRow).appendTo("#userdata tbody");
      }
      ss);

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>


</head>

<body>

  <div class="wrapper">
    <div class="profile">
      <table id="userdata" border="2">
        <thead>
          <th>FirstName</th>
          <th>LastName</th>
          <th>EmailAddress</th>
          <th>City</th>
        </thead>
        <tbody>

        </tbody>
      </table>

    </div>
  </div>

</body>

</html>

And my json codes

{
   "person": [
       {
           "firstName": "Clark",
           "lastName": "Kent",
           "Email Address": "Reporter",
           "City": 20
       },
       {
           "firstName": "Bruce",
           "lastName": "Wayne",
           "Email Address": "Playboy",
           "City": 30
       },
       {
           "firstName": "Peter",
           "lastName": "Parker",
           "Email Address": "Photographer",
           "City": 40
       }
   ]
}

For source, I download a jquery file fromwebsite to my folder.

I added this picture because of source is very important about json and I want to be sure my way is ture for create a html.

When I start html there is not data as shown in picture

Actually nothing. Html opens but there is not a array or someting which inculude json file. When I start, just shown html file without information that given with json. — Mustafa Coskun
– Mustafa Coskun, Commented Mar 17, 2017 at 7:44

Rory McCrossan · Accepted Answer · 2017-03-17 07:50:29Z

Assuming that your AJAX request is working, there are several syntax problems in your code.

You have a random ss before the $.each() closing brace
You're looping over data.new4 which doesn't exist. You need to loop over the data.person array
The property names you're using do not match those in the object. Note that JS is case sensitive.
You need to use bracket notation to access the 'Email Address' property as it contains a space - or better still change it to match the format of the other properties, ie. emailAddress. The same should be done for City too.
While not an error, you don't need to append string literals together, just put them in the same string.

With those fixes in place your code should work:

var data = {
    "person": [{
        "firstName": "Clark",
        "lastName": "Kent",
        "Email Address": "Reporter",
        "City": 20
    }, {
        "firstName": "Bruce",
        "lastName": "Wayne",
        "Email Address": "Playboy",
        "City": 30
    }, {
        "firstName": "Peter",
        "lastName": "Parker",
        "Email Address": "Photographer",
        "City": 40
    }]
}

//$.getJSON('new4.json', function(data) {
    $.each(data.person, function(i, person) {
        var tblRow = "<tr><td>" + person.firstName + "</td><td>" + person.lastName + "</td><td>" + person['Email Address'] + "</td><td>" + person.City + "</td></tr>"
        $(tblRow).appendTo("#userdata tbody");
    });
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="profile">
        <table id="userdata" border="2">
            <thead>
                <th>FirstName</th>
                <th>LastName</th>
                <th>EmailAddress</th>
                <th>City</th>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

Also note that all of the above errors can be found by checking the console in your browser. This can generally be accessed by pressing F12

Thank you for Your interest. That way works in same html but I will take json file from folder as this json folder will update always. If I take json file from a folder how can I update my codes. I wrote new4.json because this is which json file in folder. According to your codes How can I get json codes from out side. And I tried that codes here. jsfiddle.net/b5fr55qy but when I take this code on notepad++ they don't work.
This is a simplified version of your code. I only included the data in the answer as I can't make an AJAX request here. Just uncomment the $.getJSON lines.

SAMUEL · Accepted Answer · 2017-03-17 07:47:01Z

If i understand you correctly following code will solve your issue.

Please change your .each function with this

$.each(data.person, function(i, f) {
  var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" +
    "<td>" + f.lastName + "</td>" + "<td>" + f["Email Address"] + "</td>" + "<td>" + f.City + "</td>" + "</tr>"
  $(tblRow).appendTo('body');
});

var data = {
   "person": [
       {
           "firstName": "Clark",
           "lastName": "Kent",
           "Email Address": "Reporter",
           "City": 20
       },
       {
           "firstName": "Bruce",
           "lastName": "Wayne",
           "Email Address": "Playboy",
           "City": 30
       },
       {
           "firstName": "Peter",
           "lastName": "Parker",
           "Email Address": "Photographer",
           "City": 40
       }
   ]
}

$.each(data.person, function(i, f) {
  var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" +
    "<td>" + f.lastName + "</td>" + "<td>" + f["Email Address"] + "</td>" + "<td>" + f.City + "</td>" + "</tr>"
  $(tblRow).appendTo('body');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body></body>

Collectives™ on Stack Overflow

Read json file with jquery in javascript

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related