Displaying javascript multidimensional array in different HTML tags

Question

I have this multidimensional array below i'm trying to display the first and last name in the H3 tags, the age in the H4 tags and the person-desc in the P tags and everything inside the tab. I'm not sure the way i am currently displaying the first and last name is the best way to do it. Is there any better / simple way to accomplish this? Any help would be greatly appreciated!

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

var personArr = [];
var person = {["first-Name"]:"John", ["last-Name"]:"Doe", ["age"]:21, ["person-desc"]:"Nice guy currently still studying"};
var person2 = {["first-Name"]:"Paul", ["last-Name"]:"Logan", ["age"]:22, ["person-desc"]:"Hot tempered person in the military"};
var person3 = {["first-Name"]:"Sean", ["last-Name"]:"Kim", ["age"]:32, ["person-desc"]:"Smart guy working as a Doctor"};
var person4 = {["first-Name"]:"Ken", ["last-Name"]:"Chow", ["age"]:12, ["person-desc"]:"Loves travelling works overseas"};

personArr.push(person, person2, person3, person4);
console.log(personArr);

var parent = document.getElementsByClassName('line1')[0].children;
console.log(parent);
var personFlag = 0;
for(var i = 0; i < parent.length; i=i+1){
  parent[i].innerHTML += personArr[personFlag]['first-Name'] +' '+ personArr[personFlag]['last-Name'];
  personFlag++
}

body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.line1{
display:inline-block;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
</div>

<div id="People" class="tabcontent">
<div class="line1">
<h3>Name 1 :</h3>   

<h3>Name 2 :</h3>   

<h3>Name 3 :</h3>   

<h3>Name 4 :</h3>   

 </div>
 </div>


     
</body>
</html>

why are your person, person2, person3, and person4 objects structured like that, with an array as the key and a string as the value? — oldboy
– oldboy, Commented Jun 21, 2018 at 5:46
Its part of the requirements cos the data i'm getting is in this format — Best Jeanist
– Best Jeanist, Commented Jun 21, 2018 at 5:49
also, in your for loop, instead of i=i+1 you can simply use i++ which will increment i by 1 after every iteration. use ++i if you want i to increment by 1 before every iteration — oldboy
– oldboy, Commented Jun 21, 2018 at 5:51

Joe Thomas · Accepted Answer · 2018-06-21 05:53:41Z

2

Generally, and personally speaking, using innerHTML to modify the DOM in the way you're doing is somewhat frowned on. Instead, you'd create a virtual div, or DocumentFragment, and each of the "person" divs to that. Once that's done you can append the parent fragment to the DOM. This prevents additional rerendering and is generally more readable.

With your code, I would replace this part:

var parent = document.getElementsByClassName('line1')[0].children;
console.log(parent);
var personFlag = 0;
for(var i = 0; i < parent.length; i=i+1){
  parent[i].innerHTML += personArr[personFlag]['first-Name'] +' '+ personArr[personFlag]['last-Name'];
  personFlag++
}

With This:

var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();

// Iterate through the Person Array
personArr.forEach((person,i) => {
   // `person` is the ith member of personArr
   var name = document.createElement('h3');
   // Update the contents of your h3 element and add it to the fragment.
   name.textContent = `Name ${i}: ${person['first-Name']} ${person['last-Name']}`;
   frag.appendChild(name);
});
// Add the fragment to the parent :)
parent.appendChild(frag);

A non-es6 version would look like this.

var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();

// Iterate through the Person Array
for(var i = 0; i < personArr.length; i++) {
   var person = personArr[i];
   // Create our h3 element, to house the person's name.
   var name = document.createElement('h3');
   // Update the contents of your h3 element and add it to the fragment.
   name.textContent = [
       'Name',
        i,
       ':',
       person['first-Name'],
       person['last-Name']
   ].join(' ');
   frag.appendChild(name);
}

// Add the fragment to the parent :)
parent.appendChild(frag);

Additionally, you would also have to remove all the children from the HTML in order for this to work properly. i.e. make the line1 element look like this:

<div class="line1"> </div>

answered Jun 21, 2018 at 5:53

Joe Thomas

6,5276 gold badges28 silver badges38 bronze badges

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

3 Comments

Best Jeanist Over a year ago

but what if i want to add the other parts as well like the person-desc in a <p> tag

Joe Thomas Over a year ago

You can do that too :), so after you append the name as a child, you make a new <p> tag using document.createElement('p'), and you append that to the fragment as well.

Joe Thomas Over a year ago

There are a couple ways of adding properties, for class's specifically, you'd probably use classList.add, so you'd get the h3 element, and call that function, e.g. : person.classList.add('test');.

Collectives™ on Stack Overflow

Displaying javascript multidimensional array in different HTML tags

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related