How to create a table with Javascript and/or JQuery dynamicaly from an Object?

Question

I am trying to create a dynamic table with javascript where the values from "A" should be summed if "M" has the same value. In addition, the table header should be created from the values from "Code". I'm sorry that I can't describe it better, but I hope that my example shows what I mean.

var arr = [{
  "M": "52800",
  "Code": "093",
  "A": 1
}, {
  "M": "52800",
  "Code": "050",
  "A": 2
}, {
  "M": "56301",
  "Code": "093",
  "A": 3
}, {
  "M": "57401",
  "Code": "060",
  "A": 1
}, {
  "M": "57401",
  "Code": "090",
  "A": 5
}, {
  "M": "57401",
  "Code": "093",
  "A": 3
}, {
  "M": "57401",
  "Code": "080",
  "A": 5
}];

console.log(arr);

The result table should look like:

M	093	050	060	090	080
52800	1	2
56301	3
57401	3		1	5	5

It is also possibe to create the table if the "Code" and "A" is nested in "CodeHead" like this?

    var arr = [{
        "M": "52800",
        "CodeHead": [{
            "Code": "093",
            "A": 1
        }, {
            "Code": "050",
            "A": 2
        }]

    }, {
        "M": "56301",
        "CodeHead": [{
            "Code": "093",
            "A": 3
        }]
    }, {
        "M": "57401",
        "CodeHead": [{
            "Code": "060",
            "A": 1
        }, {
            "Code": "090",
            "A": 5
        }, {
            "Code": "093",
            "A": 3
        }, {
            "Code": "080",
            "A": 5
        }]
    }];

What have you tried to get the desired result? I do not see any attempt(s) being made. Please see How to Ask and Minimal, Reproducible Example for more info — StackByMe
– StackByMe, Commented Jan 21, 2022 at 14:30
Further more the data provided doesn't match the given output. — StackByMe
– StackByMe, Commented Jan 21, 2022 at 14:35

Tom · Accepted Answer · 2022-01-21 16:10:06Z

2

You could do it this way (explanations in comments) :

var arr = [{
  "M": "52800",
  "Code": "093",
  "A": 1
}, {
  "M": "52800",
  "Code": "050",
  "A": 2
}, {
  "M": "56301",
  "Code": "093",
  "A": 3
}, {
  "M": "57401",
  "Code": "060",
  "A": 1
}, {
  "M": "57401",
  "Code": "090",
  "A": 5
}, {
  "M": "57401",
  "Code": "093",
  "A": 3
}, {
  "M": "57401",
  "Code": "080",
  "A": 5
}];

//distinct M values for rows
const rows = [...new Set(arr.map(item => item.M))];
//distinct Code values for columns
const cols = [...new Set(arr.map(item => item.Code))];


let table = document.createElement("table");
let tableHead = document.createElement("thead");

let head = "<tr><th>M</th>";
//populate header row with values in cols array
cols.forEach(col => head += "<th>" + col + "</th>");
head += "</tr>";
tableHead.innerHTML = head;

let tableBody = document.createElement("tbody");
//body will contain table rows
let body = "";
rows.forEach((row, index) => {
  //open table row and add value from rows array
  body += "<tr><td>" + row + "</td>";
  //populate row with corresponding values or empty cell
  cols.forEach(col => {
    //try to find if there is a "A" value associated with current col and row
    let value = arr.find(el => el.M === row && el.Code === col);
    let cell = value ? value.A : "";
    body += "<td>" + cell + "</td>";
  });
  body += "</tr>";
});
tableBody.innerHTML = body;

table.appendChild(tableHead);
table.appendChild(tableBody);

document.body.appendChild(table);

table, th, td {
  border: solid 1px black;
}

edited Jan 21, 2022 at 16:10

answered Jan 21, 2022 at 15:20

Tom

5,6893 gold badges13 silver badges31 bronze badges

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

1 Comment

InFlames82 Over a year ago

Thank you. It works perfect, but I have to change the data so the "Code" and "A" nested in "CodeHead". Is it also possible to create the table? I've edited my question

Collectives™ on Stack Overflow

How to create a table with Javascript and/or JQuery dynamicaly from an Object?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related