Suggestion for improving this code to be more readable and easy for beginners? I'm a JavaScript beginner trying to learn by doing. Here I have a table with different values: I have used two for loops. Is there an easier way to achieve this? For example having just one for loop, or instead of it use something else? Even better would be if you could give suggestions to improve the code to be more readable (beginner friendly?)



let animals 
let animalCols = ['Animal', 'Animal 2'] 
let peopleCols = ['Person', 'Person 2'] 
 
function myFunction() { 
  paivitys(animals, animalCols) 
} 
 
function paivitys(dataa, arvvoja) { 
  console.log(dataa); 
  //---- 
  if (dataa.hasOwnProperty("animal")) { 
    document.getElementById("1name").innerHTML = dataa.animal; 
  } else { 
    document.getElementById("1name").innerHTML = dataa.person; 
  } 
  //----   
  if (dataa.hasOwnProperty("animal2")) { 
    document.getElementById("2name").innerHTML = dataa.animal2; 
  } else { 
    document.getElementById("2name").innerHTML = dataa.person2; 
     
  } 
 
  document.getElementById("1name1").innerHTML = arvvoja[0]; 
  document.getElementById("2name1").innerHTML = arvvoja[1]; 
 
  //-----  
  document.getElementById("id").innerHTML = dataa.id; 
} 
 
function paivitaselekt(dataa, arvvoja) { 
  for (var i = 0; i &lt; dataa.length; i++) { 
    var valitse = document.getElementById("Select"); 
    var option = document.createElement("option"); 
 
   for (var i = 0; i &lt; dataa.length; i++) { 
    var valitse = document.getElementById("Select"); 
    var option = document.createElement("option"); 
    for (var j = 0; j &lt; arvvoja.length; j++) { 
       option.textContent += dataa[i][arvvoja[j]] + " "; 
    } 
    valitse.appendChild(option); 
} ; 
    valitse.appendChild(option); 
  } 
} 
 
animals = { 
  "animal": "tiger", 
  "animal2": "lion", 
  "id": "54321", 
  "dole": { 
    "Key": "fhd699f" 
  } 
} 
 
paivitys(animals, animalCols); 
let kokoarray; 
 
people = [{ 
    "person": "kaka", 
    "person2": "julle", 
    "id": "9874", 
  }, 
  { 
    "person": "Ronaldo", 
    "person2": "jussi", 
    "id": "65555", 
  } 
] 
kokoarray = people; 
paivitaselekt(kokoarray, ["person", "id"]); 
 
document.getElementById("Select").addEventListener("change", function(event) { 
  const otettutunnsite = event.target.value.split(" ")[1]; 
  const otettutieto = kokoarray.filter((dataa) =&gt; dataa.id === otettutunnsite)[0]; 
  paivitys(otettutieto, peopleCols); 
}); 
&lt;!DOCTYPE html&gt; 
&lt;html lang="en"&gt; 
  &lt;head&gt; 
    &lt;meta charset="UTF-8" /&gt; 
    &lt;meta name="viewport" content="width=device-width" /&gt; 
    &lt;link 
      rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
    /&gt; 
    &lt;link 
      rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" 
      integrity="sha384UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" 
      crossorigin="anonymous" 
    /&gt; 
    &lt;style&gt; 
 
    &lt;/style&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
  
&lt;div class=""&gt; 
  &lt;table class="table "&gt; 
    &lt;thead&gt; 
      &lt;tr&gt; 
        &lt;th   id="1name1" class="table-success"&gt;Animal&lt;/th&gt; 
        &lt;th   id="2name1" class="table-success"&gt;Animal&lt;/th&gt; 
        &lt;th   class="table-success"&gt;id&lt;/th&gt; 
      &lt;/tr&gt; 
    &lt;/thead&gt; 
    &lt;tbody&gt; 
      &lt;th id="1name"&gt;&lt;/th&gt; 
      &lt;th id="2name"&gt;&lt;/th&gt; 
      &lt;th id="id"&gt;&lt;/th&gt; 
    &lt;/tbody&gt; 
  &lt;/table&gt; 
 
  &lt;select id="Select" &gt;&lt;/select&gt; 
  &lt;button onclick="myFunction()"&gt;backtozero&lt;/button&gt; 
&lt;/div&gt;  &lt;/body&gt; 
&lt;/html&gt;
Some suggestions:

Since you never reassign animals, better to declare it with const. (On a similar note, don't mix let and var - var has too many gotchas, and let permits reassignment, which is more difficult for a reader of the code to parse than const. Always prefer const.)

You never declare the people variable. This will throw an error in strict mode, and in sloppy mode, will implicitly create a variable on the global object, even if the whole script is inside its own function. Best to always declare variables before using them. Since the kokoarray is the same as people, it'll be easier to just use one of those variables, no need for two identical ones which refer to the same array.

Regarding your myFunction, don't use inline handlers, they have way too many problems to be worth using in modern scripts; use addEventListener instead:

document.querySelector('button').addEventListener('click', () =&gt; {
  paivitys(animals, animalCols)
});


Rather than selecting elements over and over, it would be more elegant to select the elements you need once, then reference those variables rather than calling querySelector again. It's less repetitive and less expensive.

Numeric-indexed IDs are a code smell. IDs should be reserved for elements which are completely unique in the document. If you want to indicate that an element fulfills a particular role that other elements have as well, use a class or a data attribute instead.

Your &lt;tbody&gt; is missing a child &lt;tr&gt; - both &lt;td&gt;s and &lt;th&gt;s should only be children of &lt;tr&gt;s. Also, &lt;th&gt;s should be reserved for table headers. For plain data (like in your body), it'd be more semantically appropriate to use tds. If you want to make them bold, use CSS for that.

&lt;tbody&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/tbody&gt;


Rather than having animal and animal2 and person and person2, it'd be a lot simpler to combine all of those properties into a single array property, perhaps call it names. Rather than having multiple entirely separate data structures, it'll be far easier to parse it if they have the same format. One option is:

const animalData = {
  cols: ['Animal', 'Animal 2'],
  items: [{
    names: ['tiger', 'lion'],
    id: "54321",
  }]
};
const people = {
  cols: ['Person', 'Person 2'],
  items: [{
      names: ['kaka', 'julle'],
      id: "9874",
    },
    {
      names: ['Ronaldo', 'jussi'],
      id: "65555",
    }
  ]
};


This way, to reference the first (only) animal, use animalData.items[0]. To reference the ith person, reference people.items[i]. Populating the table gets much easier now:

const headTR = document.querySelector('thead tr');
const bodyTR = document.querySelector('tbody tr');
function display(cols, item) {
  headTR.children[0].textContent = cols[0];
  headTR.children[1].textContent = cols[1];
  bodyTR.children[0].textContent = item.names[0];
  bodyTR.children[1].textContent = item.names[1];
  bodyTR.children[2].textContent = item.id;
}


Remember to use textContent when inserting text - using innerHTML when you're not deliberately inserting HTML markup makes things slower and can be a security hazard if the input isn't trustworthy.

To identify which person item should be displayed when the select changes, you can set the value of each &lt;option&gt; to its current index, eg:

&lt;select&gt;
  &lt;option value="0"&gt;kaka 9874&lt;/option&gt;
  &lt;option value="1"&gt;Ronaldo 65555&lt;/option&gt;
&lt;/select&gt;


Then, when the select changes, just pass people.items[select.value] to the function that populates the table, rather than having to .find.

You can construct the options much more concisely, like the following:

people.items.forEach((item, i) =&gt; {
  const option = select.appendChild(document.createElement('option'));
  option.textContent = `${item.names[0]} ${item.id}`;
  option.value = i;
});


Put all these together, and you get:



const animalData = {
  cols: ['Animal', 'Animal 2'],
  items: [{
    names: ['tiger', 'lion'],
    id: "54321",
  }]
};
const people = {
  cols: ['Person', 'Person 2'],
  items: [{
      names: ['kaka', 'julle'],
      id: "9874",
    },
    {
      names: ['Ronaldo', 'jussi'],
      id: "65555",
    }
  ]
};

const headTR = document.querySelector('thead tr');
const bodyTR = document.querySelector('tbody tr');
function display(cols, item) {
  headTR.children[0].textContent = cols[0];
  headTR.children[1].textContent = cols[1];
  bodyTR.children[0].textContent = item.names[0];
  bodyTR.children[1].textContent = item.names[1];
  bodyTR.children[2].textContent = item.id;
}

display(animalData.cols, animalData.items[0]);
document.querySelector('button').addEventListener('click', () =&gt; {
  display(animalData.cols, animalData.items[0])
});

const select = document.querySelector("select");
select.addEventListener("change", function(event) {
  display(people.cols, people.items[select.value]);
});
people.items.forEach((item, i) =&gt; {
  const option = select.appendChild(document.createElement('option'));
  option.textContent = `${item.names[0]} ${item.id}`;
  option.value = i;
});
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"&gt;
&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"&gt;
&lt;div class=""&gt;
  &lt;table class="table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class="table-success"&gt;Animal&lt;/th&gt;
        &lt;th id="2name1" class="table-success"&gt;Animal&lt;/th&gt;
        &lt;th class="table-success"&gt;id&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td id="1name"&gt;&lt;/td&gt;
        &lt;td id="2name"&gt;&lt;/td&gt;
        &lt;td id="id"&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;

  &lt;select&gt;&lt;/select&gt;
  &lt;button&gt;backtozero&lt;/button&gt;
&lt;/div&gt;