Is this a good way to insert content from object to the DOM?

Hi I would like to know if this could be a good way to pass info from objects called; firstPerson and secondPerson to the DOM after I click my buttons so I can get different info for the first and second person depending on which button I click. THANKS
HTML

   <div id="mainDiv">
        <p>Hello my name is <span id="nameInfo"></span></p>
        <p>My home country is <span id="countryInfo"></span></p>
        <p>My favorite food is <span id="foodInfo"></span></p>
        <p>Currently I live in  <span id="currentInfo"></span></p> 
    </div>
    <button id="btnOne" onclick="firstPersonFunction()">Info first person</button>
    <button id="btnTwo" onclick="secondPersonFunction()">Info second person</button>

CSS

#mainDiv {
    background-color: darkorange;
    width: 300px;
    height: 200px;
    margin: 20px;
    padding: 15px;
}
#mainDiv p {
    color: #000;
    font-size: 20px;;
}

JS

function firstPersonFunction() {
  var firstPerson = {
    name: "John",
    homeCountry: "USA",
    favFood: "pizza",
    currentPlace: "Las Vegas"
  }
  document.getElementById("nameInfo").innerHTML = firstPerson.name;
  document.getElementById("countryInfo").innerHTML = firstPerson.homeCountry;
  document.getElementById("foodInfo").innerHTML = firstPerson.favFood;
  document.getElementById("currentInfo").innerHTML = firstPerson.currentPlace;
};
function secondPersonFunction() {
  var secondPerson = {
    name: "Chris",
    homeCountry: "Canada",
    favFood: "burgers",
    currentPlace: "Toronto"
  };
  document.getElementById("nameInfo").innerHTML = secondPerson.name;
  document.getElementById("countryInfo").innerHTML = secondPerson.homeCountry;
  document.getElementById("foodInfo").innerHTML = secondPerson.favFood;
  document.getElementById("currentInfo").innerHTML = secondPerson.currentPlace;
};

CODE PEN

It’s how I’d do it :slight_smile: Interested to see what others say.

There are all kinds of ways to solve this, but it really depends on what else you plan to do here. There is a lot of duplicate code, so the following approach removes some of the repetitive code.

Solution 1: Create a people object to contain the values of the objects with an id for the property names (1 and 2 respectively). The create a function to extract the information you need to display.

The JavaScript section becomes something like:

const people = {
  1: {
    name: "John",
    homeCountry: "USA",
    favFood: "pizza",
    currentPlace: "Las Vegas"
  },
  2: {
    name: "Chris",
    homeCountry: "Canada",
    favFood: "burgers",
    currentPlace: "Toronto"
  }
}

function getPersonInfo(personId) {
  const { name, homeCountry, favFood, currentPlace } = people[personId];
  document.getElementById("nameInfo").innerHTML = name;
  document.getElementById("countryInfo").innerHTML = homeCountry;
  document.getElementById("foodInfo").innerHTML = favFood;
  document.getElementById("currentInfo").innerHTML = currentPlace;
}

and the HTML section buttons become:

<button id="btnOne" onclick="getPersonInfo(1)">Info first person</button>
<button id="btnTwo" onclick="getPersonInfo(2)">Info second person</button>

Solution 2: If the names of the people were unique and you made span ids have the same name as the object property names, you could streamline a bit more:

The JavaScript could be:

const people = {
  "John": {
    homeCountry: "USA",
    favFood: "pizza",
    currentPlace: "Las Vegas"
  },
  "Chris": {
    homeCountry: "Canada",
    favFood: "burgers",
    currentPlace: "Toronto"
  }
}

function getPersonInfo(personName) {
  const person = people[personName];
  document.getElementById("name").innerHTML = personName;
  Object.keys(people[personName]).forEach(prop => {
    document.getElementById(prop).innerHTML = person[prop];
  });
}

and the HTML would be:

<div id="mainDiv">
  <p>Hello my name is <span id="name"></span></p>
  <p>My home country is <span id="homeCountry"></span></p>
  <p>My favorite food is <span id="favFood"></span></p>
  <p>Currently I live in <span id="currentPlace"></span></p>
</div>
<button id="btnOne" onclick="getPersonInfo('John')">Info first person</button>
<button id="btnTwo" onclick="getPersonInfo('Chris')">Info second person</button>
1 Like

Thanks alot guys, happy to see that this code wasn’t extremely bad, thanks for the help

Just think if you had 10 people with 10 buttons. Having a single function to update the information is the way to go.

Yup I was thinking to put more buttons so this is the perfect solution for this problem, thanks alot