Use jQuery to convert JSON array to HTML bulleted list

How can you convert an array of strings represented in JSON format and convert this to an HTML bulleted list using jQuery?

var ul = $('<ul>').appendTo('body');
var json = { items: ['item 1', 'item 2', 'item 3'] };
$(json.items).each(function(index, item) {
    ul.append(
        $(document.createElement('li')).text(item)
    );
});

As far as fetching the JSON from your server using AJAX is concerned you could use the $.getJSON() function.

Live demo.

<script language="JavaScript" type="text/javascript">

// Here is the code I use.  You should be able to adapt it to your needs.

function process_test_json() {
  var jsonDataArr = { "Errors":[],"Success":true,"Data":{"step0":{"collectionNameStr":"ideas_org_Private","url_root":"http:\/\/192.168.1.128:8500\/ideas_org\/","collectionPathStr":"C:\\ColdFusion8\\wwwroot\\ideas_org\\wwwrootchapter0-2\\verity_collections\\","writeVerityLastFileNameStr":"C:\\ColdFusion8\\wwwroot\\ideas_org\\wwwroot\\chapter0-2\\LastFileName.txt","doneFlag":false,"state_dbrec":{},"errorMsgStr":"","fileroot":"C:\\ColdFusion8\\wwwroot\\ideas_org\\wwwroot"}}};

var htmlStr= "<h3 class='recurse_title'>[jsonDataArr] struct is</h3> " + recurse( jsonDataArr );
alert( htmlStr );
$( document.createElement('div') ).attr( "class", "main_div").html( htmlStr ).appendTo('div#out');
$("div#outAsHtml").text( $("div#out").html() ); 
}
function recurse( data ) {
  var htmlRetStr = "<ul class='recurseObj' >"; 
  for (var key in data) {
        if (typeof(data[key])== 'object' && data[key] != null) {
            htmlRetStr += "<li class='keyObj' ><strong>" + key + ":</strong><ul class='recurseSubObj' >";
            htmlRetStr += recurse( data[key] );
            htmlRetStr += '</ul  ></li   >';
        } else {
            htmlRetStr += ("<li class='keyStr' ><strong>" + key + ': </strong>&quot;' + data[key] + '&quot;</li  >' );
        }
  };
  htmlRetStr += '</ul >';    
  return( htmlRetStr );
}

</script>
</head><body>
<button onclick="process_test_json()" >Run process_test_json()</button>
<div id="out"></div>
<div id="outAsHtml"></div>
</body>

<!-- QUESTION: Maybe some one with more jquery experience 
could convert this to a shorter / pure jquery method -->

A JSON string like that would look like:

'["foo","bar","base","ball"]'

You can parse that into an Javascript array object by calling JSON.parse(), iterate over that array and insert the strings.

var jsonstring = '["foo","bar","base","ball"]',
    arr = JSON.parse(jsonstring),
    len = arr.length;

while(len--) {
    $('<li>', { 
        text:   arr[len]
    }).appendTo('ul');
}

Use jQuery jPut plugin. Just create a html template & call your json file. you can also call the ajax file through jPut (ajax_url)

http://plugins.jquery.com/jput/

<script>
    $(document).ready(function(){
        var json = [{"name": "item1","link":"link1"},{"name": "item2","link":"link2"}];

          //jPut code 
          $("#menu").jPut({
            jsonData:json,
            name:"template",
          });
    });
</script>

<body>    
        <!-- jput template, the li that you want to append to ul-->
        <div jput="template">
           <li><a href="http://yourdomain.com/{{link}}">{{name}}</a></li>
        </div>

        <!-- your main ul -->
        <ul id="menu">
        </ul>
</body>

Use jQuery to convert JSON array to HTML bulleted list

Related

Recent Posts