How to create a list with clickable id in javascript

Question

I am trying to implement a list of array items from a json file,more list the list you find on google plus,but i am new to programming and dont know how to do it using javascript.Please help.I tried the following but im getting a blank page;

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));
        });

and html:

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

And i dont understand how list.js and data.js work as list plugins.I managed to display a list from json file using handlebars but gave up along the way as i couldnt figure out the onclick item display content of selected item in handlebars.Now im trying to do it the old fashioned way,using javascript.

kind user · Accepted Answer · 2017-03-17 20:09:38Z

1

You have used each() function in your example, but you didn't tag jQuery. It's such a simple case that I would suggest you to use pure 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>

edited Mar 17, 2017 at 20:09

answered Mar 17, 2017 at 18:24

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Angela Dutchan Over a year ago

thank you.This works perfectly.Now how do i do the onclick display command for each item clicked?

kind user Over a year ago

@AngelaDutchan Tell me exactly what do you want to happen, if you click on each li.

Angela Dutchan Over a year ago

so basically the list should only contain name and command should display when item of the list is selected.More like view more.Sorry for bothering you,im learning...did this already with handlebars js,,but handlebars is proving to be difficult with onclick li..."for each li"

Angela Dutchan Over a year ago

thanks..im also trying to research,but the problem is,i dont know the correct terminology to search for:i searched for javascript list tutorials,javascript array list..and im hitting a wall

Collectives™ on Stack Overflow

How to create a list with clickable id in javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related