Extract keys from json but ignore some

JavaScript
1

Trying to use a demo code in my own application. It converts JSON Data Dynamically to a HTML Table using JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Convert JSON Data to HTML Table</title>
</head>
<body>
    <input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
    <p id="showData"></p>
</body>

<script>
    function CreateTableFromJSON() {
        var myBooks = [
            {
                "Book ID": "1",
                "Book Name": "Computer Architecture",
                "Category": "Computers",
                "Price": "125.60"
            },
            {
                "Book ID": "2",
                "Book Name": "Asp.Net 4 Blue Book",
                "Category": "Programming",
                "Price": "56.00"
            },
            {
                "Book ID": "3",
                "Book Name": "Popular Science",
                "Category": "Science",
                "Price": "210.40"
            }
        ]

        // EXTRACT VALUE FOR HTML HEADER. 
        // ('Book ID', 'Book Name', 'Category' and 'Price')
        var col = [];
        for (var i = 0; i < myBooks.length; i++) {
            for (var key in myBooks[1]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1);                   // TABLE ROW.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < myBooks.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myBooks[i][col[j]];
            }
        }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }
</script>
</html>

Can anyone help me understand how to just extract the 1st and 4th key for the html table header? In this demo case it would be ID and Price. I have been searching and trying various methods but when I look in the console, I have broken it every time. I am guessing it occurs when the var key is created.

Many thanks

2

Hi,

You have to create table header only if the i is equal to 0 or 3 or if col[i] is equal to Book ID or Price.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }
3

This will help you.

4

OK, so I thought I would try:

for (var i = 0; i < col.length; i++) {
                    if (col[i] = "Price") {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
}
        }

that got me the same amount of columns just with Price as the header of all of them so I guess it is still creating the four columns based on the quantity of keys returned. My head hurts

5

Hi,

If you try this:

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            if (col[i] == "Book ID" || col[i] == "Price")  {
            th.innerHTML = col[i];
            tr.appendChild(th);
            }
        }

You will see this:
Screenshot%20from%202019-09-07%2020-17-49

All you need to do is to make the same changes for the loop that is adding the data to the table.

6

I was still playing whilst you were typing. Thanks for the help. I got to:

        // EXTRACT VALUE FOR HTML HEADER. 
        // ('Book ID', 'Book Name', 'Category' and 'Price')
        var col = [];
        for (var i = 0; i < myBooks.length; i++) {

            for (var key in myBooks[i]) { 
                    if (key = "Price") {            
                if (col.indexOf(key) === -1) {

                    col.push(key);
                    console.log (key);

                 }
                }
            }
        }

and that got me just the single column price on my screen. I was mis-forming the or selector by not using == so I will go and try that for the second part