Get an object attribute value using another array as reference

Question

I have two arrays, one is an Array of Objects like this:

[
    Object {ID: "2006", Description: "ABCDEFG"}
    Object {ID: "2102", Description: "HIJKLMN"}
    Object {ID: "2616", Description: "OPQRSTU"}
]

And the another is an array with the attributes

["ID", "Description"]

I'm trying to use JQuery .each function to capture the values using the Array as reference and create a HTML table, just like this:

        var columns = new Array();
        var strTable = '';
        var tHead = '';
        var tBody = '';

        //Capture the columns
        $.each(arrObjects, function (a, b) {
            columns=Object.getOwnPropertyNames(b)
        });

        //Make the Table Head;
        $.each(columns, function (a, b) {
            tHead += '<th>'+ b +'</th>'
        });

        //Create table body
        $.each(arrObjects, function (aa, bb) {
            tBody += '<tr>'

            $.each(columns, function (a, b) {
                tBody += '<td>'+ bb.b +'</td>'
            });

            tBody += '</tr>'
        })

        strTable = '<table class="table"><thead><tr>' + tHead + '</tr></thead><tbody>' + tBody + '</tbody></table>'

But using this way, I am always getting the value undefined.

Could you help me create a function that receive one Array of Objects and it retrieve a table? Or help me find out what I'm doing wrong it's ok too.

bb.b is tha attribute with the name b of bb you want bb[b] which uses the value of b as key. JavaScript property access: dot notation vs. brackets? — t.niese
– t.niese, Commented Dec 23, 2014 at 13:31
It is for sure a duplicate to another question, but I currently don't find a good one. — t.niese
– t.niese, Commented Dec 23, 2014 at 13:33
Me too, I really search a lot before I post. Maybe I didn't use the right words on my search. — MarceloBarbosa
– MarceloBarbosa, Commented Dec 23, 2014 at 13:34
Searching for a matching question is not that easy. But it is also not helpful to answer it over and over again, because someone else having the same problem wont find your question either, as neither the title nor the text will match. That's why I just answered it as a comment. — t.niese
– t.niese, Commented Dec 23, 2014 at 13:36

a--m · Accepted Answer · 2014-12-23 13:49:20Z

1

You have some mistakes inside the each loops, try this snippet, and pay close attention to the variables inside //Create table body

var columns = [];
var strTable = '';
var tHead = '';
var tBody = '';
var arrObjects = [
 {ID: "2006", Description: "ABCDEFG"},
 {ID: "2102", Description: "HIJKLMN"},
 {ID: "2616", Description: "OPQRSTU"}
];

//Capture the columns
$.each(arrObjects, function (a, b) {
  columns=Object.getOwnPropertyNames(b);
});

//Make the Table Head;
$.each(columns, function (a, b) {
  tHead += '<th>'+ b +'</th>';
  console.log(tHead);
});

//Create table body
$.each(arrObjects, function (idx, obj) {
  tBody += '<tr>';

  $.each(obj, function (obj_idx, value) {
    console.log(value);
    tBody += '<td>'+ value +'</td>';
  });

  tBody += '</tr>';
});

strTable = '<table class="table"><thead><tr>' + tHead + '</tr></thead><tbody>' + tBody + '</tbody></table>';

$('body').html(strTable);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
</body>

answered Dec 23, 2014 at 13:49

a--m

4,7921 gold badge42 silver badges60 bronze badges

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

2 Comments

MarceloBarbosa Over a year ago

Good job @dome, I got it. Thank you very much for your time and help; But, imagine that this object has more attributes than only those two, i must use the columns array to get only the necessary data, using brackets like t.niese told. Your answer it's right for this scope, but I will change the second each to keep using the columns Array. Hope you got it. Thanks again.

a--m Over a year ago

@MarceloBarbosa take a look into this SO answer it might give you good hints how to simplify you code.

Collectives™ on Stack Overflow

Get an object attribute value using another array as reference

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related