Load JSON from server using jQuery and display it in html5 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:

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

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

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

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

 });
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;


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/
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( "&lt;li id='item-" + key + "'&gt;" + val + "&lt;/li&gt;" );
 });


Improved code suggestion:

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

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

  $('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).