JavaScript配列からキー名を取得する方法は？

Question

JavaScriptのmap関数を使用してコードスニペットのような値を出力したいページを作成しています。

var kvArray = [{a:1, b:2},{a:3, b:4},{a:5, b:6}]; 

function getValue(item,index) { 
    var vm="<table/>" 

    var fullValue =[item.a +" "+ item.b]; 
    var v=vm+fullValue 
    return v; 
} 

function myFunction() { 
    document.getElementById("demo").innerHTML =kvArray.map(getValue).join(" ") 
} 

私はこのような出力を取得しています：

1 2 
3 4 
5 6 

しかし、私はこのような実際の出力たい：

a b 
1 2 
3 4 
5 6 

Answer 1

が働いて、たとえば次のスニペットを参照してください。

var kvArray = [{a:1, b:2},{a:3, b:4},{a:5, b:6}] 
 
var asCell = v => `<td>${v}</td>` 
 
var asRow = v => `<tr>${v}</tr>` 
 

 
$('#demo > thead > tr').html(
 
    Object.keys(kvArray[0]).map(key => asCell(key)) 
 
) 
 

 
$('#demo > tbody').html(
 
    kvArray.map(entry => { 
 
    return asRow(Object.keys(entry).map(k => { 
 
     return asCell(entry[k]) 
 
    }).join()) 
 
    }) 
 
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="demo"> 
 
    <thead> 
 
    <tr></tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
</table>

私はObject.keys(kvArray[0])を使用して「列名」を取得しました。

Answer 2

var kvArray = [{a:1, b:2},{a:3, b:4},{a:5, b:6}]; 

function getValue(item,index) 
{ 
    var vm="<table/>" 

    var fullValue =[item.a +" "+ item.b]; 
    var v=vm+fullValue 
    return v; 
} 

function createTable(kvArray) 
{ 
    var tableOpening="<table>"; 
    var tableClosing="</table>"; 
    var headerOpening= "<th>"; 
    var headerClosing= "</th>"; 
    var rowOpening= "<tr>"; 
    var rowClosing= "</tr>"; 
    var cellOpening= "<td>"; 
    var cellClosing= "</td>"; 

    // get the keys from the first element 
    var keys = Object.keys(kvArray && kvArray[0]) ; 

    // create a header 
    var header = rowOpening; 
    for (var keyIndex in keys) { 
     header += headerOpening + keys[keyIndex] + headerClosing + "\n"; 
    } 
    header += rowClosing; 

    var table = tableOpening + header; 

    // create a row for each element 
    for (var itemIndex in kvArray) { 
     // open the row element 
     var rowLine = rowOpening; 
     for (var keyIndex in keys) { 
     // fill the cells 
     rowLine += cellOpening + kvArray[itemIndex][keys[keyIndex]] + cellClosing + "\n"; 
     } 
     // close the row element 
     rowLine += rowClosing; 

     // add the current row to the table 
     table += rowLine; 
    } 

    // close the table 
    table += tableClosing; 

    return table; 
} 

今ちょうどそうのような表を作成するために、この機能を使用します。

document.getElementById("demo").innerHTML = createTable(kvArray); 

私は、これはここで与えられた回答の一部と短くないですけど、理解することがはるかに簡単である、として明らかにいくつかのコンセプトが欠落しています。つまり、コードが各行に作成されていて、それがうまくいったのです。