Concatenate data from a multidimensional Array and HTML

Question

I find that the code works as I intended (I think). But the last step in which I print the data feels wrong. The way I concatenate the html and js seems abit off. Is there a better way to concatenate this? Am I using the wrong solution to print the data?

// This list I use inside my Array.

    const myList = {
        Germany : {name : 'Germany', capital: 'Berlin', visited: 'Checked' },
        Italy : {name : 'Italy', capital: 'Rome', visited: 'Checked' },
        Spain : {name : 'Spain', capital: 'Madrid', visited: 'unchecked' },
    }

// My array

    const destinations = [];

// Push data from myList to destination-array.

    for(var key in myList) {
        destinations.push(myList[key]);
    }

// This is how write out my data on the page.

    for (var i = 0; i < destinations.length; i++) {
    document.write("<li><h1>" + destinations[i].name + "</h1><p>" + 
                   destinations[i].capital + 
                   "<input type='checkbox'" + destinations[i].visited + ">")
    };

This Is what I am planing to write out at the end.

<li class="all-destinations">
    <h3>destinations[i].name</h3>
    <div class="container">
        <label class="switch">
        <input type="checkbox" destinations[i].visited>
        </label>
    </div>
    <p>destinations[i].capital</p>
    <hr>
</li>

Instead of looping through keys of myList you can simply do: const destinations = Object.values(myList) — adiga
– adiga, Commented May 12, 2019 at 7:32
You can make this better by moving the concatenation logic to a separate function which returns the html only. That way, it would work like a template. — Deepak
– Deepak, Commented May 12, 2019 at 7:37

Maheer Ali · Accepted Answer · 2019-05-12 07:37:11Z

1

You made your code better in three ways:

Use Object.values() instead of creating [] and pushing to it.
You can use forEach() rather than simple for loops
You should use Template Strings to create html string.

const myList = {
        Germany : {name : 'Germany', capital: 'Berlin', visited: 'Checked' },
        Italy : {name : 'Italy', capital: 'Rome', visited: 'Checked' },
        Spain : {name : 'Spain', capital: 'Madrid', visited: 'unchecked' },
    }
    
const list = Object.values(myList);

list.forEach(x => {
  document.write(
  `<li class="all-destinations">
      <h3>${x.name}</h3>
      <div class="container">
        <label class="switch">
          <input type="checkbox" ${x.visited}>
        </label>
      </div>
      <p>${x.capital}</p>
      <hr>
  </li>`)
})

answered May 12, 2019 at 7:37

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

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

1 Comment

Drycker Over a year ago

Thanks for the great input! I learned a lot from your answer, but I still chose to accept @Nina Scholz's answer as the correct one.

Nina Scholz · Accepted Answer · 2019-05-12 07:45:53Z

You could assign the values to the innerHTML property directly without document.write which may not work if the page is already full loaded.

function getItems({ name, capital, visited }) {
    return `<li class="all-destinations">
        <h3>${name}</h3>
        <div class="container">
            <label class="switch">
                <input type="checkbox" ${visited}>
            </label>
        </div>
        <p>${capital}</p>
        <hr>
    </li>`;
}


const myList = { Germany: { name: 'Germany', capital: 'Berlin', visited: 'Checked' }, Italy: { name: 'Italy', capital: 'Rome', visited: 'Checked' }, Spain: { name: 'Spain', capital: 'Madrid', visited: 'unchecked' } };

document.getElementById('list').innerHTML += Object.values(myList).map(getItems).join('');

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

Collectives™ on Stack Overflow

Concatenate data from a multidimensional Array and HTML

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related