How to loop over js object and populate values in the table?

Question

I have js object that looks like this:

{
  "id": 9,
  "user_name": "John Kim",
  "age": 25,
  "is_elig": true
}

I have table where data should be populated, looks like this:

<table>
   <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Eligible</th>
   </tr>
   <tr>
      <td id="id"></td>
      <td id="user_name"></td>
      <td id="age"></td>
      <td id="is_elig"></td>
   </tr>
</table>

I use JQuery in my project and I was wondering if there is a way to loop over js object and check if the key exist in table td cell id. If does exist then populate the value in the cell.

Look into Object.entries() or just for... in

benvc
– benvc

2018-12-20 20:19:16 +00:00
Commented Dec 20, 2018 at 20:19 — benvc
– benvc, Commented Dec 20, 2018 at 20:19
@benvc Can you provide an example for Object.entires()?

espresso_coffee
– espresso_coffee

2018-12-20 20:21:52 +00:00
Commented Dec 20, 2018 at 20:21 — espresso_coffee
– espresso_coffee, Commented Dec 20, 2018 at 20:21

trincot · Accepted Answer · 2018-12-20 20:27:56Z

5

You could iterate the object:

var obj = {
  "id": 9,
  "user_name": "John Kim",
  "age": 25,
  "is_elig": true
}

$.each(obj, function (key, value) { 
    $("#" + key).text(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Eligible</th>
   </tr>
   <tr>
      <td id="id"></td>
      <td id="user_name"></td>
      <td id="age"></td>
      <td id="is_elig"></td>
   </tr>
</table>

Without jQuery, it would not be a lot more difficult:

var obj = {
  "id": 9,
  "user_name": "John Kim",
  "age": 25,
  "is_elig": true
}

Object.entries(obj).forEach(([key, value]) => 
    document.getElementById(key).textContent = value
);

<table>
   <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Eligible</th>
   </tr>
   <tr>
      <td id="id"></td>
      <td id="user_name"></td>
      <td id="age"></td>
      <td id="is_elig"></td>
   </tr>
</table>

answered Dec 20, 2018 at 20:27

trincot

357k38 gold badges282 silver badges338 bronze badges

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

2 Comments

espresso_coffee Over a year ago

Is there any major difference in efficiency? Which method is recommended?

trincot Over a year ago

Depends on your goal: if you need support for old browsers, then take the jQuery form. If you don't need that, and don't need jQuery for other things, then go for the second one. Access to DOM elements is anyway costly, so the way you loop (with jQuery or not) is not significant for the overall efficiency.

LLeon · Accepted Answer · 2018-12-20 20:28:05Z

2

Iterate through your object:

let obj = {
  "id": 9,
  "user_name": "John Kim",
  "age": 25,
  "is_elig": true
}

Object.keys(obj).forEach(i => $('td#'+ i).text(obj[i]) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Eligible</th>
   </tr>
   <tr>
      <td id="id"></td>
      <td id="user_name"></td>
      <td id="age"></td>
      <td id="is_elig"></td>
   </tr>
</table>

edited Dec 20, 2018 at 20:28

answered Dec 20, 2018 at 20:22

LLeon

2762 silver badges7 bronze badges

4 Comments

espresso_coffee Over a year ago

Can you please explain how that works and the matching of the key and cell ID?

LLeon Over a year ago

@espresso_coffee, in my previous answer i was looping over table cells, sorry. I edited to loop over your object.

Taplar Over a year ago

$('td#'+ i) <= that is less efficient than if you just looked up by the id. And just looking up by id should return the same result.

espresso_coffee Over a year ago

Is your original asnwer @LLeon better fit then? Iterating over table td cells and setting text?

bautigaraventa · Accepted Answer · 2018-12-20 20:41:51Z

I think when you say "loop over js object" you mean "loop over js array of objects". In that case you might do something like this:

<table>
   <tr id="tr_users">
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Eligible</th>
   </tr>
   <div id="tr_users"></div>
</table>

In your js file:

var users = [];
var data = [ALL USERS IN ARRAY];

function setTable(data ) {
    data .forEach(u => {
        if(userIsNewInTable(u)) {
            users.push(u);          
        }
    });
    users.forEach(u => {
        appendInTable(u);
    });
}

function userIsNewInTable(user) {
    return !users.includes(user);
}

function appendInTable(value) {
    let htmlToInsert = "";
    htmlToInsert = `<tr>
          <td>${id}</td>
          <td>${user_name}</td>
          <td>${age}</td>
          <td>${is_elig}</td>
       </tr>`;
    $('#tr_users').append(htmlToInsert);
}

In this approach, we are declaring an empty array that will be fullfilled with the users. We have a function "setTable" that will receive the array of all the data (data). It will iterate over them and check if they already are in the users array to avoid duplicated. Once we finished the iteration, we can insert the html with all the "td".

Please let me know if that's what you were looking for. I wish it helped you.

Goodbye!

Collectives™ on Stack Overflow

How to loop over js object and populate values in the table?

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related