Javascript - Use array values dynamically in HTML-CodePudding

My end result is supposed to be a list of objects in html. Bootstrap behind this. I'd like for the list to be created dynamically so I don't have to manually create all the divs because I don't know how many there will be. Here's what I have.

I have an array similar to this:

activities = 
[
    {
        "activityOwner": "Raymond Carlson",
        "activityDesc": "Complete all the steps from Getting Started wizard"
    },
    {
        "activityOwner": "Flopsy McDoogal",
        "activityDesc": "Called interested in March fundraising Sponsorship"
    },
    {
        "activityOwner": "Gary Busy",
        "activityDesc": "Get approval for price quote"
    }
]

This is the first part where I'm not sure what to do. I can assign the element ids individually for my html like this but what I'd like to do is count how many elements are in my array and create these for me. I won't know how many there are to make these manually. I'm sure there needs to be a loop but I couldn't figure it out.

document.getElementById('activityowner0').innerHTML = activities[0].activityOwner;
document.getElementById('activitydesc0').innerHTML = activities[0].activityDesc;

document.getElementById('activityowner1').innerHTML = activities[1].activityOwner;
document.getElementById('activitydesc1').innerHTML = activities[1].activityDesc;

document.getElementById('activityowner2').innerHTML = activities[2].activityOwner;
document.getElementById('activitydesc2').innerHTML = activities[2].activityDesc;

etc.
etc.

And then...once I have that part, I'd like to know how to create my html divs dynamically based on how many elements are in my array. Again, right now I don't know how many there are so I'm having to create a bunch of these and then have extras if I have too many.

<div >
  <div ></div>
  <div  id="wallmessages">
    <br>
    <div  id="m0">
      <div >
        <div >
          <div >
            <h5 >
              <p id='activityowner0'></p>
            </h5>
            <div ></div>
          </div>
        </div>
        <div >
          <p id='activitydesc0'></p>
        </div>
      </div>
    </div>

I know this is a big ask so just pointing me in the right direction would be very helpful. I hope my question was clear and I appreciate it.

CodePudding user response：

One way for you to achieve this would be to loop through the objects in your activities array. From there you can use a HTML template to store the base HTML structure which you can clone and update with the values of each object before you append it to the DOM.

In addition, an important thing to note when generating repeated content in a loop: never use id attributes. You will either end up with duplicates, which is invalid as id need to be unique, or you'll end up with ugly code generating incremental/random id at runtime which is unnecessary. Use classes instead.

Here's a working example:

const activities = [{ "activityOwner": "Raymond Carlson", "activityDesc": "Complete all the steps from Getting Started wizard"}, {"activityOwner": "Flopsy McDoogal","activityDesc": "Called interested in March fundraising Sponsorship" }, { "activityOwner": "Gary Busy", "activityDesc": "Get approval for price quote" }]

const html = activities.map(obj => {
  let item = document.querySelector('#template').innerHTML;
  item = item.replace('{owner}', obj.activityOwner);
  item = item.replace('{desc}', obj.activityDesc);
  return item;
});
document.querySelector('#list').innerHTML = html.join('');

<div id="list"></div>

<template id="template">
  <div >
    <div ></div>
    <div >
      <div >
        <div >
          <div >
            <div >
              <h5 >
                <p >{owner}</p>
              </h5>
              <div ></div>
            </div>
          </div>
          <div >
            <p >{desc}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>