CODEWITHSUNDEEP
javascriptarrays
Marcel Kredzel
Marcel Kredzel

Reputation: 45

How to display this JS array in a HTML list?

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

Upvotes: 1

Views: 7753

Answers (6)

Danziger
Danziger

Reputation: 21161

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>

Upvotes: 8

burg.developer
burg.developer

Reputation: 378

//<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>

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65806

  • 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>

Upvotes: 3

Goran Stoyanov
Goran Stoyanov

Reputation: 2311

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>

Upvotes: 0

themca
themca

Reputation: 323

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

Upvotes: 0

Kavelin
Kavelin

Reputation: 444

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>

Upvotes: 0

Related Questions