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

但我想要这样的实际输出：

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);

我知道这并不像这里给出的一些答案那么简短，但理解起来要简单得多，因为你显然缺少一些概念，即你的代码在每一行都是创造的，你很幸运它有效。

如何从JavaScript数组中获取键名？

2 个答案: