Как создать список из массива JSON?

Question

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

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) и тому подобное, но я не могу манипулировать данными, чтобы они отображались так, как я хотел. Я даже не знаю, как использовать термин для поиска вопросов, поскольку я знаю, что это похоже на базовый массив ... Спасибо за вашу помощь!

Answer 1

и может это сделать:

$(function(){ 

$.ajax({ 
    type : 'GET', 
    url : 'scripts/list.json', 
    async : false, 
    beforeSend : function(){/*loading*/}, 
    dataType : 'json', 
    success : function(result){ 
    var buffer=""; 
    $.each(result, function(index, val){ 

     for(var i=0; i < val.length; i++){ 
     var item = val[i]; 
     console.log(item.name); 
     buffer+=" <li><a href='#"+item.name+"'>"+item.name+"</a></li> <li><a href='#"+item.command+"'>"+item.command+"</a></li>"; 
     } 
     $('ul').html(buffer); 
    }); 
    } 
}); 
}); 

Answer 2

внесении очень незначительные изменения в код,

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

теперь сделать что-то со всеми значениями в массиве a.

EDIT:

В случае этого было недостаточно,

var list = $('<ui></ui>'); 
$.each(result.states, function(state) { 
    var link = $('<a></a>').prop('href', state.command).text(state.name); 
    ('<li></li>').append(link).appendTo(list); 
}); 

list является HTML вы хотите (для имени капитализации за исключением ... Я не был уверен, что если первая буква должна заглавными буквами или первой буквой каждого слова, поэтому я оставил это в покое).

Answer 3

JQuery может создавать элементы и добавлять к вашим документам несколько строк кода.

Вы можете создать пустой список, подобный этому.

var mylist=$("<ul></ul>"); 

Тогда внутри for цикла, для каждого элемента, сделать что-то вроде этого

mylist.append($("<li></li>").text(item.name)); 

И, наконец, добавить свой недавно построенный список документа, чтобы он отображается:

mylist.appendTo($("body")); 

Answer 4

Это должно работать:

Получите json-файл, который вы хотите прочитать, введите список элементов, используя ключ и значения json-данных. Наконец, добавьте список внутри ul и добавьте его в тело.

$.getJSON("jsonFile.json", function(data) { 
    var items = []; 
    $.each(data, function(key, val1) { 
    $.each(val1, function(){ 
      items.push("<li><a href=#'" + this.command + "'>" + this.name + "</a></li>");  
     }); 
    }); 
    $("<ul/>", { 
     "class": "my-new-list", 
     html: items.join("") 
     }).appendTo("body"); 
}); 

Answer 5

Я проверил этот сценарий, и это работает должным образом:

var records = { 
       "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" 
        } 
       ] 
      }; 

      $.each(records.states, function (key, val) { 
       $('#ul').append($('<li>').text('name: ' + val.name + ', command: ' + val.command)); 
      }); 

и это HTML:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <ul id="ul"></ul> 
</body> 
</html>