Get JSON to HTML JavaScript table

Question

I created a new category as the main table list table. the question is how to insert this JSON data into the JavaScript HTML table with the format below:

{
  query: {
    count: 10,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  test1: {
    count: 16,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  bold: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  home: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  .....
}

Table like this:

| Name | Count | Time | Language | Diag | 
------------------------------------------------------------- 
| query | 10 | 2015-12-09T17:12:09Z | en-US | 2 | 
| test1 | 16 | 2015-12-09T17:12:09Z | en-US | 2 | .....

You will have to generate HTML based on the json. This would require iterating over the json objects entries and creating html elements or markup. There is no magic function that will convert json to a html table. — Zac
– Zac, Commented May 30, 2019 at 14:23
in this case I need a javascript code that can define json data into the html table. so about what I described above — borneo
– borneo, Commented May 30, 2019 at 14:34
@borneo "in this case I need a javascript code", SO requires a minimal reproducible example which includes JavaScript. The JavaScript itself is not expected to work in fact it's expected not to work, Nevertheless it's expected otherwise the OP (ie you) will appear as someone who is just demanding the work be done for you. — zer00ne
– zer00ne, Commented May 30, 2019 at 14:46
am sorry, ok, I understand what you are talking about besides I keep digging from several sites. so far I have only found from third parties from ZingGrid exmple xxx.js — borneo
– borneo, Commented May 30, 2019 at 15:25

Artem Arkhipov · Accepted Answer · 2019-05-30 14:36:40Z

2

Here is a short example which can help you to understand the principle and then tune it to suit your needs.

const source = {
  query: {
    count: 10,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US"
  },
  test1: {
    count: 16,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US"
  },
  bold: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US"
  },
  home: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US"
  }
}

const keys = Object.keys(source); // get the names properly
const colNames = Object.keys(source[keys[0]]); // get all column names

// Let's form table and header first
const table = document.createElement('table');
const header = document.createElement('tr');
header.innerHTML = `<th>name</th>`
header.innerHTML += colNames.map(name => `<th>${name}</th>`).join('');
table.appendChild(header);

// Now lets append all the rows
const rows = keys.map((key) => {
  const tr = document.createElement('tr');
  tr.innerHTML = `<td>${key}</td>`
  tr.innerHTML += colNames.map(name => `<td>${source[key][name]}</td>`).join('');
  return tr;
});

rows.forEach(r => table.appendChild(r));

// render
document.body.appendChild(table);

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

answered May 30, 2019 at 14:36

Artem Arkhipov

7,5256 gold badges34 silver badges56 bronze badges

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

5 Comments

borneo Over a year ago

how about if const source i replace with url?

Artem Arkhipov Over a year ago

Did you run the snippet? What exactly doesn’t work?

borneo Over a year ago

how about if const source i replace with url? exam from zpool.ca/api/currencies

Artem Arkhipov Over a year ago

Try to use fetch() to get data from url. After that just use the above code with received data.

borneo Over a year ago

i try

function getData() {         $.ajax({             url: 'https://www.zpool.ca/api/currencies',             success: function() {}         })     }     var data = getData;

but not work

Zac · Accepted Answer · 2019-05-30 14:31:26Z

1

Something along the lines of this?

This will generate html markup based on the JSON data. Then write it to the document.

var data = {
  query: {
    count: 10,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US"
  },
  test1: {
    count: 16,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
  },
  bold: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
  },
  home: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
  }
};

let htmlStr = "<table><tr><td>Name</td><td>Count</td><td>Time</td><td>Language</td></tr>";
const keys = Object.keys(data);
for (var key of keys) {
  let item = data[key];
  htmlStr += `<tr><td>${key}</td><td>${item.count}</td><td>${item.created}</td><td>${item.lang}</td></tr>`;
}
htmlStr += "</table>";
document.write(htmlStr);

table {
 border-collapse: collapse;
}

td {
 border: 1px solid black;
}

answered May 30, 2019 at 14:31

Zac

2,21124 silver badges49 bronze badges

1 Comment

borneo Over a year ago

this work for me.. btw, how about var data replace as url (ajax)

Vishal Kumar · Accepted Answer · 2019-05-30 14:33:15Z

First, you need to create a <table> in HTML, Apply some styles to it (see example below, you can run it)

Then run a loop on you data set and add rows to you table.

Use string literals to replace data from you variable to rowHTML, or you can use any templating library to create a html template for cleaner code.

var myData = {
	query: {
		count: 10,
		created: "2015-12-09T17:12:09Z",
		lang: "en-US",
		diagnostics: {},
	},
	test1: {
		count: 16,
		created: "2015-12-09T17:12:09Z",
		lang: "en-US",
		diagnostics: {},
	},
	bold: {
		count: 1,
		created: "2015-12-09T17:12:09Z",
		lang: "en-US",
		diagnostics: {},
	},
	home: {
		count: 1,
		created: "2015-12-09T17:12:09Z",
		lang: "en-US",
		diagnostics: {},
	}
};

var myDataKeys = Object.keys(myData);

var myTable = document.getElementById("myTable");

for(var i=0; i<myDataKeys.length; i++) {
	const rowData = myData[myDataKeys[i]];
	const rowHTML = `<tr><td>${myDataKeys[i]}</td><td>${rowData.count}</td><td>${rowData.created}</td><td>${rowData.lang}</td>`;
	myTable.innerHTML += rowHTML;
}

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

<table id="myTable">
 <tr><td>Name</td><td>Count</td><td>Time</td><td>Language</td></tr>
</table>

borneo · Accepted Answer · 2019-05-30 16:54:16Z

0

@Zac. i test but not work.

$.ajax({
            url: 'https://www.zpool.ca/api/currencies',
            success: function(data) {
                let htmlStr = "<table><tr><td>Name</td><td>Count</td><td>Time</td><td>Language</td></tr>";
                const keys = Object.keys(data)
                for (var key of keys) {
                    let item = data[key];
                    htmlStr += `<tr><td>${key}</td><td>${item.algo}</td><td>${item.port}</td><td>${item.name}</td></tr>`;
                }
                htmlStr += "</table>";
                document.write(htmlStr);
            }
        });

answered May 30, 2019 at 16:54

borneo

596 bronze badges

Collectives™ on Stack Overflow

Get JSON to HTML JavaScript table

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related