Adding items to a list from JSON array

Question

I'm still new to JavaScript, so apologies if anything is unclear (or if this is really simple) - basically I am trying to create a list from a JSON array, which adds a number of list items to a list (where the exact number of list items to be added varies). For example, in the below - in the "roles" array there are three list items that need to be added for John Smith and four for Mary Taylor.

rolesData = [
{"name": "John Smith", 
 "title": "project manager", 
 "roles": 
 ["Planning and Defining Scope", "Activity Planning and Sequencing", "Resource Planning"],
}, 
 {"name": "Mary Taylor", 
 "title": "test analyst", 
 "roles": 
 ["design and develop tests for software and systems to detect faults", "analyse the defects and bugs to identify what is causing them", "track the success of the solutions", "keep software and systems documentation up to date"],
},

Here is the loop I use to add the list items. For the example above this works as intended for the second one as there are 4 items to be added and it loops through four times, but it will obviously add 4 items to the one that only requires 3 as well (the last one comes up as undefined) - what I'm struggling a little with is how to make it so that it loops through the number of times that corresponds to how many items there are in "roles" - e.g. if there are five items in "roles", it should add 5 list items. i.e. what should the condition be in the for loop: for (i = 0; ???????; i++)?

NB: 'num' is a random number that is generated, so if num is 0 it will get the data for John Smith etc.

function createList(num) {

...

var rolesList = document.createElement("ul");

for (i = 0; i < 3; i++){
    var roleItem = document.createElement("li");
    roleItem.innerHTML = rolesData[num].roles[i];
    rolesList.appendChild(roleItem);
}

Update: Having solved the issue of how to get the list to populate with the correct numbers on loading the page, I am now trying to add a functionality where by if you click on a button it will change the items in the list - this means that it may change from having 3 items to 4 items for example, and vice versa.

I have tried adapting the answer from @ggorlen (which worked great for creating the list) below but using getElementById rather than create element (when creating the list I assigned the id "featuredList" to the ul and "listItem" + count to the li's, so that for each new listItem that was created the id was listItem1, listItem2 etc. - I've checked this in console.log and appeared to be working correctly). I believe the issue is that if the initial list has only 3 items then there are only 3 listItem id's assigned, so if trying to change the list to one with 4 in it, there is no id for the fourth one to go to - so I guess my question is how would I do it so that if you are changing the elements, you can change it to a list with more or less items in it?

const createList = data => {
const list = document.getElementById("featuredList");
count = 1;
   data.forEach(e => {
     const listItem = document.getElementByID("listItem" + count);
     listItem.innerHTML = e;
     list.appendChild(listItem);
     count++;
  });
return list;
};

@RobG Oops, yep. Even better, avoid manual iteration entirely with forEach instead — CertainPerformance
– CertainPerformance, Commented Sep 10, 2018 at 5:49

ggorlen · Accepted Answer · 2018-09-10 06:10:27Z

2

Your loop should not iterate up to a fixed literal number like 3, but instead to whatever the roles.length array property is. Even cleaner, use array.forEach, which calls a function on every element of the array and passes the current element into the function. I called it e for element in the below example.

Secondly, it's poor practice to access a global variable from a function context. This is an unnecessary dependency that breaks modularity. If your global scope changes, you may inadvertently break unrelated functions elsewhere in your code and it becomes difficult to reason about the program state. Pass all of your data into the function as parameters. In this case, you could skip the num parameter and simply pass in the data object itself.

Thirdly, try to keep functions as generic as possible. A createList function should create any <ul> list you wish, so giving the variables generic names and ignoring the .roles property on data (the caller can worry about this) enables maximum code reuse.

Lastly, I'm returning the node array back to the caller to allow flexibility in terms of what to do with it (in this case, appending it to the document body). The caller is taking a random decimal number between 0 and 1 using Math.random() and multiplying that by the size of the array. Since array indices are integers, the bitwise ~~ (not not) chops off the decimal portion of the number. This is roughly equivalent to Math.floor or | 0.

const rolesData = [{
    "name": "John Smith",
    "title": "project manager",
    "roles": ["Planning and Defining Scope", "Activity Planning and Sequencing", "Resource Planning"],
  },
  {
    "name": "Mary Taylor",
    "title": "test analyst",
    "roles": ["design and develop tests for software and systems to detect faults", "analyse the defects and bugs to identify what is causing them", "track the success of the solutions", "keep software and systems documentation up to date"],
  }
];

const createList = data => {
  const list = document.createElement("ul");

  data.forEach(e => {
    const listItem = document.createElement("li");
    listItem.innerHTML = e;
    list.appendChild(listItem);
  });
  
  return list;
};

document.body.appendChild(
  createList(rolesData[~~(Math.random()*rolesData.length)].roles)
);

If you prefer terseness, reduce (doc) is a good option:

const rolesData = [{
    "name": "John Smith",
    "title": "project manager",
    "roles": ["Planning and Defining Scope", "Activity Planning and Sequencing", "Resource Planning"],
  },
  {
    "name": "Mary Taylor",
    "title": "test analyst",
    "roles": ["design and develop tests for software and systems to detect faults", "analyse the defects and bugs to identify what is causing them", "track the success of the solutions", "keep software and systems documentation up to date"],
  }
];

const createList = data =>
  data.reduce((a, e) => {
    const item = document.createElement("li");
    item.innerHTML = e;
    a.appendChild(item);
    return a;
  }, document.createElement("ul")
);

document.body.appendChild(
  createList(rolesData[~~(Math.random()*rolesData.length)].roles)
);

edited Sep 10, 2018 at 6:10

answered Sep 10, 2018 at 5:50

ggorlen

59.3k8 gold badges119 silver badges173 bronze badges

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

6 Comments

Manoz Over a year ago

Would you please describe what is the purpose of tilde (~) signature?

ggorlen Over a year ago

Added that info. Let me know if anything else doesn't make sense.

Logan Over a year ago

@ggorlen Thanks - that works well. I'm not too familiar with forEach yet but it's something I will definitely be looking into in more detail soon. And thanks for the tips code re-use etc, that will be really helpful

ggorlen Over a year ago

No shame in using a traditional for loop if you're comfortable with that--it's faster because there's less overhead than in creating functions. The important thing is using .length if you do.

Logan Over a year ago

@ggorlen Would the same basic premise apply if I was to try and change the items in the list rather than creating them? For example, if I initially created a list which had 3 items in it, and then I wanted to change that to a list that had four items in it? I've tried a bit but can't quite seem to get it to work - see update to the original question for a more detailed idea of what I am trying to do

|

RobG · Accepted Answer · 2018-09-10 06:10:58Z

Just an alternative using reduce and taking advantage of appendChild returning the appended element, so you can create and append in one go and get a reference to the appended node.

var rolesData = [
{"name": "John Smith", 
 "title": "project manager", 
 "roles": 
 ["Planning and Defining Scope", "Activity Planning and Sequencing", "Resource Planning"],
}, 
 {"name": "Mary Taylor", 
 "title": "test analyst", 
 "roles": 
 ["design and develop tests for software and systems to detect faults", "analyse the defects and bugs to identify what is causing them", "track the success of the solutions", "keep software and systems documentation up to date"],
}];

function createList(data) {
  var list = document.createElement('ul');
  list.appendChild(data.roles.reduce((frag, role) => {
    var item = frag.appendChild(document.createElement('li'));
    item.innerHTML = role;
    return frag;
  }, document.createDocumentFragment()));
  return list;
}

window.onload = function(){
  document.body.appendChild(createList(rolesData[Math.random()*rolesData.length|0]));
};

Collectives™ on Stack Overflow

Adding items to a list from JSON array

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related