How to display this JS array in a HTML list?

Question

I would like to display this array in an ordered list on my HTML website.

I have already tried few times, but it didn't work.

<p><span id="demo"></span></p>

<script>
var persons = [
  {firstname : "Malcom", lastname: "Reynolds"},
  {firstname : "Kaylee", lastname: "Frye"},
  {firstname : "Jayne", lastname: "Cobb"}
];

function getFullName(item) {
  var fullname = [item.firstname,item.lastname].join(" ");
  return fullname;
}

function myFunction() {
  document.getElementById("demo").innerHTML = persons.map(getFullName);
}
</script>

I expect the names to be shown as follows:

1. Malom Reynolds
2. Kaylee Frye
3. Jayne Cobb

Danziger · Answer 1 · 2019-10-26T17:30:53.167

You are missing a call to .join('') after persons.map(...)`, so that you don't add additional commas between the different elements/names, as otherwise the array items will be joined automatically using the default separator, which is the comma.

Also, you should probably be using <ol> and <li> to render an ordered list, which will also add the numbers to the list items.

If you want to simplify something, I would consider using template literals and arrow function expressions rather than mixing your rendering and business logic in a single function just for the sake of writing less code or more compact code. IMO, it's better to focus on writing reusable, readable/self-documenting code.

const persons = [
  { firstname: 'Malcom', lastname: 'Reynolds' },
  { firstname: 'Kaylee', lastname: 'Frye' },
  { firstname: 'Jayne',  lastname: 'Cobb' },
];

function getFullName(item) {
  return [item.firstname, item.lastname].join(' ');
  
  // Alternative with template literals:
  // return `${ item.firstname } ${ item.lastname }`;
}

function renderList() {
  document.getElementById('list').innerHTML = persons.map((person) => {
    return `<li>${ getFullName(person) }</li>`;
  }).join('');
  
  // Alternative using arrow function expression:
  // document.getElementById('list').innerHTML = persons.map(person => `<li>${ getFullName(person) }</li>`).join('');
  
}

renderList();

<ol id="list"></ol>

Scott Marcus · Accepted Answer · 2019-10-26T17:04:08.787

3

The easiest thing to start with is that you never call either of your functions.
Also, if you want a numbered list, you need to use ol and li elements.
Additionally, the calls for map and join are overkill. Just loop over the array and get your updated content into a string. Then, when the loop is done, inject the string into the DOM.
Lastly, you don't have a JSON array, JSON is a string format. You just have an array.

myFunction();

<p><ol id="demo"></ol></p>

<script>
var persons = [
  {firstname : "Malcom", lastname: "Reynolds"},
  {firstname : "Kaylee", lastname: "Frye"},
  {firstname : "Jayne", lastname: "Cobb"}
];

function myFunction() {
  var result = "";
  persons.forEach(function (item) {
    result += "<li>" + item.firstname + " " + item.lastname;
  });
  
  document.getElementById("demo").innerHTML = result;
}
</script>

edited Oct 26 '19 at 17:04

answered Oct 26 '19 at 16:58

Scott Marcus

64,069
6
49
71

So `.map` and `.join` are overkill but `.forEach` and manually concatenating the strings are better? I'd argue the only simplification that might make this more readable would be using template literals, but there are pretty valid reasons to keep the `getFullName` function separated if that's used in more places (so probably if this comes from a real-life project) and even to keep using join if more parts are likely to be considered (`middleName`) or if some might be `undefined`. – Danziger Oct 26 '19 at 17:14
@Danziger *So .map and .join are overkill but .forEach and manually concatenating the strings are better?* <-- Yes. `map` produces an additional array that `forEach()` doesn't and since we're not using that array, `join` becomes irrelevant. The concatenation here is extremely simple so I don't see why you would consider it anywhere near the overhead of the original code. And considering that the OP marked this as the answer, I guess he agrees. – Scott Marcus Oct 26 '19 at 17:58
@Danziger As for your suggestion about template literals, I'd say that the OP should actually avoid `.innerHTML` and HTML strings completely and just build elements, but that wasn't what the question was asking about. – Scott Marcus Oct 26 '19 at 18:00
Yes, you are right about the additional array and `.innerHTML`, but unless you are rendering a huge list, the additional performance and reduced memory footprint don't matter, so IMO, readability should be favoured instead. In any case, that also depends on personal code style preferences. – Danziger Oct 29 '19 at 02:20

Goran Stoyanov · Answer 3 · 2019-10-26T17:03:56.057

First of all you need to call myFunction() somewhere inside your <script> tag. Then it would be good if you wrap persons.map in <ol> and </ol> to create an ordered list. Finally, just wrap each item with <li> and </li> to generate a list item element for each object in your array.

Example (not tested);


<script>
  var persons = [
    { firstname: "Malcom", lastname: "Reynolds" },
    { firstname: "Kaylee", lastname: "Frye" },
    { firstname: "Jayne", lastname: "Cobb" }
  ];

  function getFullName(item) {
    var fullname = "<li>" + [item.firstname, item.lastname].join(" ") + "</li>";
    return fullname;
  }

  function myFunction() {
    document.getElementById("demo").innerHTML =
      "<ol>" + persons.map(getFullName).join('') + "</ol>";
  }

  myFunction();
</script>

score 0 · Answer 4 · answered Oct 26 '19 at 17:00

To make an ordered list, you must use the element <ol>, and the items inside there are <li>, or a list item. We can make an <li> for each item, and append that to the <ol>. Here is a snippet:

var persons = [
  {firstname : "Malcom", lastname: "Reynolds"},
  {firstname : "Kaylee", lastname: "Frye"},
  {firstname : "Jayne", lastname: "Cobb"}
];

function getFullName(item) {
  var fullname = [item.firstname,item.lastname].join(" ");
  return fullname;
}

function myFunction() {
  persons.forEach(function(item) {
      var listItem = document.createElement('li');
      listItem.innerText = getFullName(item);
      document.getElementById("demo").appendChild(listItem);
  });
}

myFunction();

<p><ol id="demo"></ol></p>

score 0 · Answer 5 · answered Oct 26 '19 at 17:02

        <p><span id="demo"></span></p>

<script>
var persons = [
  {firstname : "Malcom", lastname: "Reynolds"},
  {firstname : "Kaylee", lastname: "Frye"},
  {firstname : "Jayne", lastname: "Cobb"}
];

function getFullName(item) {
  var fullname = item.firstname + ' ' + item.lastname + '<br>';
  return fullname;
}


var list = '';
for(var i = 0; i < persons.length; i++) {
    list +=  getFullName(persons[i]);
}
document.getElementById("demo").innerHTML = list;

score 0 · Answer 6 · answered Oct 26 '19 at 17:12

//<p id="demo"><ol id='orderedList'></ol></p> <==== HTML
//    
//
//
<script>
var persons = [
  {firstname : "Malcom", lastname: "Reynolds"},
  {firstname : "Kaylee", lastname: "Frye"},
  {firstname : "Jayne", lastname: "Cobb"}
];


for(let i=0 ;i <persons.length;i++){
document.querySelector('#orderedList').innerHTML +="<li>"+persons[i].firstname+" "+persons[i].lastname+ "</li>"

}
</script>

How to display this JS array in a HTML list?

6 Answers6