how to print console data in table format in javascript and jquery
The console.table() method displays tabular data as a table.
This function takes one mandatory argument data, which must be an array or an object, and one additional optional parameter columns.
It logs data as a table. Each element in the array (or enumerable property if data is an object) will be a row in the table.
The first column in the table will be labeled (index). If data is an array, then its values will be the array indices. If data is an object, then its values will be the property names. Note that (in Firefox) console.table is limited to displaying 1000 rows (first row is the labeled index).
// an array of strings
<script>
console.table(["apples", "oranges", "bananas"]);
</script>
output:
(index) |
values |
0 |
"apples" |
1 |
"oranges" |
2 |
"bananas" |
// an object whose properties are strings
<script>
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const me = new Person("dilip", "kumar");
console.table(me);
</script>
output:
(index) |
values |
firstname |
"dilip" |
lastname |
"kumar" |
// an array of arrays
<script>
const people = [
["dilip", "kumar"],
["sha", "babu"],
["harish", "rachagoku"],
];
console.table(people);
</script>
output:
(index) |
0 |
1 |
0 |
"dilip" |
"kumar" |
1 |
"sha" |
"babu" |
2 |
"harish" |
"rachagoku" |
// an array of objects
<script>
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const dilip= new Person("dilip", "kumar");
const sha= new Person("sha", "babu");
const harish= new Person("harish", "rachagoku");
console.table([dilip, sha, harish]);
</script>
output:
(index) |
firstname |
lastname |
0 |
"dilip" |
"kumar" |
1 |
"sha" |
"babu" |
2 |
"harish" |
"rachagoku" |
<script>
// an object whose properties are objects
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var family={};
family.mother=new Person('jane','smith')
family.daughter=new Person('hello','world')
console.table(family)
</script>
output:
(index) |
firstName |
lastName |
mother |
"jane" |
"smith" |
daughter |
"hello" |
"world" |