Load JSON from server using jQuery and display it in html5

Question

I am just starting with JavaScript and jQuery, so I appreciate your help!

I want to read items from a JSON file like this:

{
  "items": [
    "this",
    "that"
  ]
}

My code (inspired by a number of stackoverflow and jQuery reference example code) looks like this:

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div id="notification"></div>
<ul id="items"></ul>
<script>
$.get('list.json', {}, function(data, response){
   var jsonResult;
   try {
     jsonResult = JSON.parse(data);
   }
   catch (e) {
     $('div#result').html('<span style="color:red">cannot load data because: "'+e+'"</span>');
   };

     var items = []
     $.each( jsonResult['items'], function( key, val ) {
        items.push( "<li id='item-" + key + "'>" + val + "</li>" );
     });

     /* // this does not work
    $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
    }).appendTo( "div#notification" );
      */

     $('ul#items').html(items.join(""));

 });
</script>
</body>
</html>

And it works. Yay.

My questions:

Is that more or less ok what I nitted? What can be enhanced?
Why does the commented-out section not work? I took this from https://api.jquery.com/jQuery.getJSON/

hnefatl · Accepted Answer · 2017-08-25 16:11:45Z

Some ideas:

#1- I suggest using .map().join() or even better .reduce() which is more semantically correct for what you want to do: reduce a array to an html string.

#2 - You should also use var jsonResult = {items: []}; otherwise if the catch gets called you will have a error down the line because you expect jsonResult to be an Object.

#3 - Another thing: I suppose your example is simplified so much it became incorrect, since the items array has strings, and not objects with key and val...

{
  "items": [
    "this",
    "that"
  ]
}

#4- You did have an error in your code, you were using function( key, val ) {, but that is not the jQuery API. The callback gets the iterated item as this and in the second argument. The first argument is the index...

You could use a callback with destructuring like this:

 var items = []
 $.each(jsonResult['items'], function(i, {key, val}){
    items.push( "<li id='item-" + key + "'>" + val + "</li>" );
 });

Improved code suggestion:

$.get('list.json', {}, function(data, response) {
  var jsonResult = {items: []};
  try {
    jsonResult = JSON.parse(data);
  } catch (e) {
    $('div#result').html('<span style="color:red">cannot load data because: "' + e + '"</span>');
  };

  var html = jsonResult['items'].reduce(function(string, item) {
    return string + "<li id='item-" + item.key + "'>" + item.val + "</li>"
  }, '');

  $('ul#items').html(html);

});

#5 - About your commented code question:

You are trying to use .join() on objects. It does work if you fix what I suggested above(jsFiddle).

thank you. one question: Can't I have an array of simple strings in the json file? The key (in my code) becomes indices then. — steffen, Commented Aug 25, 2017 at 12:52
jQuery also has a getJSON method that avoids the need to constantly write a try-catch block. api.jquery.com/jQuery.getJSON — Andrea Lazzarotto, Commented Aug 25, 2017 at 13:17
@steffen you can have just strings in you JSON. In that case you can use function( key, val ) { where key is the numeric index. — Sergio, Commented Aug 25, 2017 at 13:29
@AndreaLazzarotto true. And I think the OPs question has code from those docs. — Sergio, Commented Aug 25, 2017 at 13:30

Stack Exchange Network

Load JSON from server using jQuery and display it in html5

1 Answer 1

Hot Network Questions

Load JSON from server using jQuery and display it in html5

1 Answer 1

Related

Hot Network Questions