How to display array vertically table form javascript

Question

I was hoping someone could help me figure out a way to print an array vertically. please note my array length not equal.

[
   ["birthdate", "birthmonth", "contact_id", "company_id", "contact_type_id", "type_name", "vendor_type_id", "is_active", "first_name", "last_name", "email_address", "phone_number", "mobile_number", "fax_number", "address", "state_id", "state_name", "zip_code", "labels", "profile_logo", "website_url", "employees", "parent_id"],
   ["3", "2", "244", "3", "1", "Customers", null, "1", "sorthia", "daksh choratiya", "[email protected]", "8787877887", "7878787887", "7.87879E+11", "sdfkjhfkd", null, null, "45454", ",undefined,", "https://s3.us-west-2.amazonaws.com/home-inspection%2FContactsCSV-EXCEL-Files/1519826594241_download.png"],
   [null, null, "515", "3", "1", "Customers", null, "1", "prashant", "gadhiya bhai", "[email protected]", "1231321321", "1321321313", "1321321231", "13213213", "1", "Alabama", "12345", ",undefined,"],
   ["11", "11", "529", "3", "1", "Customers", null, "1", "Hardik bhai bhai", "Patel bhai", "[email protected]", "98765432100", "65498732100", "9.87978E+11", "Addrreess surat", "6", "Colorado", "987640", ",undefined,"]
]

I need to display data in below format how can i display this array in vertically I need output like below table how can i do this?

|birthdate       | 3   | null |
|birthmonth      | 2   | null |
|contact_id      | 244 | 515  |
|company_id      | 3   | 3    |
|contact_type_id | 1   | 1    |

There's no VueJS in your code. I've removed the tags for now :) — Terry
– Terry, Commented Mar 13, 2018 at 11:43

Nikhil Aggarwal · Accepted Answer · 2018-03-13 11:36:55Z

1

You can try following.

Assumptions

All the arrays are of same length
You want the table to include all the array (against your sample output which targets only first 3 arrays)

Logic is to iterate over any of the array and then transform or prepare another array. It is called Transposing a 2D-array

var arr = [
   ["birthdate", "birthmonth", "contact_id", "company_id", "contact_type_id", "type_name", "vendor_type_id", "is_active", "first_name", "last_name", "email_address", "phone_number", "mobile_number", "fax_number", "address", "state_id", "state_name", "zip_code", "labels", "profile_logo", "website_url", "employees", "parent_id"],
   ["3", "2", "244", "3", "1", "Customers", null, "1", "sorthia", "daksh choratiya", "[email protected]", "8787877887", "7878787887", "7.87879E+11", "sdfkjhfkd", null, null, "45454", ",undefined,", "https://s3.us-west-2.amazonaws.com/home-inspection%2FContactsCSV-EXCEL-Files/1519826594241_download.png"],
   [null, null, "515", "3", "1", "Customers", null, "1", "prashant", "gadhiya bhai", "[email protected]", "1231321321", "1321321313", "1321321231", "13213213", "1", "Alabama", "12345", ",undefined,"],
   ["11", "11", "529", "3", "1", "Customers", null, "1", "Hardik bhai bhai", "Patel bhai", "[email protected]", "98765432100", "65498732100", "9.87978E+11", "Addrreess surat", "6", "Colorado", "987640", ",undefined,"]
];


var result = arr[0].map(function(item, index){
    var temp = [];
    for (var i = 0; i < arr.length; i++) {
      temp.push(arr[i][index]);
    }
    return temp;
});

console.log(result);

edited Mar 13, 2018 at 11:36

answered Mar 13, 2018 at 11:33

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

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

1 Comment

Nikhil Aggarwal Over a year ago

@PrAtikLochawala - Yes but you will need to customize the above code - totally depends on the output you want

Alex Yokisama · Accepted Answer · 2018-03-13 11:37:11Z

For arrays of different length you can just make an if check.

var arr = [
   ["birthdate", "birthmonth", "contact_id", "company_id", "contact_type_id", "type_name", "vendor_type_id", "is_active", "first_name", "last_name", "email_address", "phone_number", "mobile_number", "fax_number", "address", "state_id", "state_name", "zip_code", "labels", "profile_logo", "website_url", "employees", "parent_id"],
   ["3", "2", "244", "3", "1", "Customers", null, "1", "sorthia", "daksh choratiya", "[email protected]", "8787877887", "7878787887", "7.87879E+11", "sdfkjhfkd", null, null, "45454", ",undefined,", "https://s3.us-west-2.amazonaws.com/home-inspection%2FContactsCSV-EXCEL-Files/1519826594241_download.png"],
   [null, null, "515", "3", "1", "Customers", null, "1", "prashant", "gadhiya bhai", "[email protected]", "1231321321", "1321321313", "1321321231", "13213213", "1", "Alabama", "12345", ",undefined,"],
   ["11", "11", "529", "3", "1", "Customers", null, "1", "Hardik bhai bhai", "Patel bhai", "[email protected]", "98765432100", "65498732100", "9.87978E+11", "Addrreess surat", "6", "Colorado", "987640", ",undefined,"]
];
html = "<table>";
for (var i = 0; i < arr[0].length; i++) {
  html += "<tr>";
  for (var j = 0; j < arr.length; j++) {
    var val = arr[j][i];
    if (val == undefined || val == null) val = "-";
    html += "<td>" + val + "</td>";
  }
  html += "</tr>";
}
html += "</table>";
$("body").append(html);

Pasindu · Accepted Answer · 2018-03-13 11:48:07Z

var temp = [
    ["birthdate", "birthmonth", "contact_id", "company_id", "contact_type_id", "type_name", "vendor_type_id", "is_active", "first_name", "last_name", "email_address", "phone_number", "mobile_number", "fax_number", "address", "state_id", "state_name", "zip_code", "labels", "profile_logo", "website_url", "employees", "parent_id"],
    ["3", "2", "244", "3", "1", "Customers", null, "1", "sorthia", "daksh choratiya", "[email protected]", "8787877887", "7878787887", "7.87879E+11", "sdfkjhfkd", null, null, "45454", ",undefined,", "https://s3.us-west-2.amazonaws.com/home-inspection%2FContactsCSV-EXCEL-Files/1519826594241_download.png"],
    [null, null, "515", "3", "1", "Customers", null, "1", "prashant", "gadhiya bhai", "[email protected]", "1231321321", "1321321313", "1321321231", "13213213", "1", "Alabama", "12345", ",undefined,"],
    ["11", "11", "529", "3", "1", "Customers", null, "1", "Hardik bhai bhai", "Patel bhai", "[email protected]", "98765432100", "65498732100", "9.87978E+11", "Addrreess surat", "6", "Colorado", "987640", ",undefined,"]
];

var body = document.getElementsByTagName('body')[0];
var tbl = document.createElement('table');
tbl.style.width = '50%';
tbl.setAttribute('border', '1');
var tbdy = document.createElement('tbody');
for (var i = 0; i < temp[0].length; i++) {
    var tr = document.createElement('tr');
    for (var j = 0; j < temp.length; j++) {
        if (temp[j][i]) {
            tr.insertCell(j).innerHTML = temp[j][i];
        } else {
            tr.insertCell(j).innerHTML = "";
        }
    }

    tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)

Collectives™ on Stack Overflow

How to display array vertically table form javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related