如何用javascript中的可点击ID创建列表

Question

我想从json文件中实现数组项目列表，更多列表你可以在谷歌加上找到的列表，但我是编程新手，不知道该怎么做它使用javascript.Please help.I尝试以下但即时获得一个空白页;

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：

<ul id="ul"></ul> 

，我不明白list.js和data.js是如何工作的列表plugins.I管理，以显示使用把手JSON文件列表，但沿放弃方式，因为我不能找出onclick项目显示在句柄中选定的项目的内容。现在即时通讯尝试做到这一点老式的方式，使用JavaScript。

Answer 1

您在示例中使用了each()函数，但未标记jQuery。这是一个简单的例子，我建议你使用纯JavaScript。

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"}]}, 
 

 
    elem = document.getElementById('ul'); //get 'ul' element from the DOM 
 
     records.states.forEach(function(v) { //iterate over array in JSON 
 
     var li = document.createElement('li'); //create 'li' element 
 
     li.innerHTML = 'name: ' + v.name; //assign your data to each 'li' 
 
     elem.appendChild(li); //append 'li' to the 'ul' element 
 
    }); 
 
    
 
var elems = document.getElementsByTagName('li'); 
 
Array.from(elems).forEach((v,i) => v.addEventListener('click', function(){ 
 
    Array.from(elems).forEach((c,k) => {c.style.background = 'transparent'; c.innerHTML = 'name: ' + records.states[k].name;}); 
 
    this.innerHTML = 'name: ' + records.states[i].name + ', command: ' + records.states[i].command; 
 
    this.style.background = '#E3F6CE'; 
 
}));

<ul id="ul"></ul>