What you could do is create two separate divs or paragraphs (whatever you need), each holding one persons information. Then you could create an array that holds the objects within. Something like this

let data = [
        {
          name: 'Person 1',
          age: '30'
        },
        {
          name: 'Person 2',
          age: '30'
        },
      ];

      const info = document.querySelector('#info');
       const infoTwo = document.querySelector('#info2');

      

      info.innerHTML = data[0].name + ' ' + 'is ' + data[0].age;
       infoTwo.innerHTML = data[1].name + ' ' + 'is ' + data[1].age;

<p id = "info"></p>
<p id = "info2"></p>

It’d be more like this. You could just add them to div‘s… that’s very close to how ReactJS does it by using JSX, but by using plain JS, it is:

let data = [{
    name: 'Person 1',
    age: '30'
  },
  {
    name: 'Person 2',
    age: '28'
  },
];

const info = document.querySelector('#info');

let details = data.map(function(item) {
  return '<div>' + item.name + ' ' + 'is ' + item.age + "</div>";
});

info.innerHTML = details.join("n");

#info div {
  border: 1px dotted #07f;
  margin: 0.3em;
  padding: 1.2em;
  border-radius: 0.6em;
}

<div id="info"></div>

ES6 syntax

Now, it can be made a little cleanly if you use the ES6 syntax, like the following:

let data = [{
    name: 'Person 1',
    age: '30'
  },
  {
    name: 'Person 2',
    age: '28'
  },
];

const info = document.querySelector('#info');

let details = data.map(item => `<div>${item.name} is ${item.age}</div>`);

info.innerHTML = details.join("n");

#info div {
  border: 1px dotted #07f;
  margin: 0.3em;
  padding: 1.2em;
  border-radius: 0.6em;
}

<div id="info"></div>

So I’m mapping through an array of objects, but it displays everything within one line.

I want to display this as if it’s 2 separate cards.

      let data = [
        {
          name: 'Person 1',
          age: '30'
        },
        {
          name: 'Person 2',
          age: '30'
        },
      ];

      const info = document.querySelector('#info');

      let details = data.map(function(item) {
        return ' ' + item.name + ' ' + 'is ' + item.age;
      });

      info.innerHTML = details;

I only have one p tag, so it just displays the name and age all within that one p tag.

     <p id="info"></p>

So it just looks like this

Person 1 is 30, Person 2 is 30.

What I’d like it to do is be wrapped in a custom div and essentially be a stand alone card.

So like this