У меня проблемы с пониманием массивов и циклов, поэтому эта задача меня немного смущает. Вот мои вещи;

JSON

{
"states": [
    { 
        "name":"johor" , 
        "command":"view_johor" }, 

    { 
        "name":"selangor" , 
        "command":"view_selangor" }, 

    { 
        "name":"melaka" , 
        "command":"view_melaka" }, 

    { 
        "name":"kuala lumpur" , 
        "command":"view_kl" }, 

    { 
        "name":"penang" , 
        "command":"view_penang" }
    ]
}

JAVASCRIPT

$(function(){

$.ajax({
    type        :   'GET',
    url         :   'scripts/list.json',
    async       :   false,
    beforeSend  :   function(){/*loading*/},
    dataType    :   'json',
    success     :   function(result){

                        $.each(result, function(index, val){
                            for(var i=0; i < val.length; i++){
                                var item = val[i];
                                console.log(item.name)
                                }
                        });         

                        },
   });
});

Моя проблема в том, что я не знаю, как использовать цикл так, чтобы мой HTML возвращался так:

<ul>
   <li><a href="#view_johor">Johor</a></li>
   <li><a href="#view_selangor">Selangor</a></li>
   <!-- and so on, dynamically depending on json... -->
</ul>

Я могу получить доступ к данным черезconsole.log(item.name) и тому подобное, но я не могу манипулировать данными, чтобы они отображались так, как я хотел. Я даже не знаю, какой термин использовать для поиска вопросов, так как я знаю, что это похоже на базовые элементы массива .... Заранее спасибо за помощь!