0

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.

Panther
  • 3,312
  • 9
  • 27
  • 50
MarceloBarbosa
  • 915
  • 16
  • 29
  • 1
    `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?](http://stackoverflow.com/q/4968406/1960455) – t.niese Dec 23 '14 at 13:31
  • You are right. Please, post it as an Answer. Thank you. – MarceloBarbosa Dec 23 '14 at 13:33
  • It is for sure a duplicate to another question, but I currently don't find a good one. – t.niese Dec 23 '14 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 Dec 23 '14 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 Dec 23 '14 at 13:36

1 Answers1

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>
a--m
  • 4,716
  • 1
  • 39
  • 59
  • 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. – MarceloBarbosa Dec 23 '14 at 13:52
  • @MarceloBarbosa take a look into this [SO answer](http://stackoverflow.com/a/10301494/220272) it might give you good hints how to simplify you code. – a--m Dec 23 '14 at 13:57