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