解析对象

Question

我尝试根据搜索条件解析下面的值，然后将结果打印到表中。我能够正确地解析所需的结果以控制或将所有结果打印到表中。以下是我尝试合并这两个函数。我最终得到了类型错误TypeError: obj.list[i].forEach is not a function。从搜索开始，我相信这是因为它是一个对象，而不是一个数组，虽然无法正确解析对象。如何更正问题以正确解析对象？

var obj = {
  "list": [{
      "name": "my Name",
      "id": 12,
      "type": "car owner"
    },
    {
      "name": "my Name",
      "id": 13,
      "type": "car owner2"
    },
    {
      "name": "my Name4",
      "id": 14,
      "type": "car owner3"
    },
    {
      "name": "my Name4",
      "id": 15,
      "type": "car owner5"
    }
  ]
};

var tableBody = "";

var columns = [];

// Create the header record.
tableBody = tableBody + "<tr>";
for (var prop in obj.list[0]) {
  if (obj.list[0].hasOwnProperty(prop)) {
    // Append properties such as myid, fname, lname etc.
    tableBody = tableBody + ("<th>" + prop + "</th>");

    // Also keep a list of columns, that can be used later to get column values from the 'data' object.
    columns.push(prop);
  }
}
tableBody = tableBody + "</tr>";

var results = [];
var searchField = "name";
var searchVal = "my Name";
for (var i = 0; i < obj.list.length; i++) {
  // search term
  if (obj.list[i][searchField] == searchVal) {
    // Create the data rows. 
    // I get an error here: 
    obj.list[i].forEach(function(row) {
      // Create a new row in the table for every element in the data array.
      tableBody = tableBody + "<tr>";

      columns.forEach(function(cell) {
        // Cell is the property name of every column.
        // row[cell] gives us the value of that cell.
        tableBody = tableBody + "<td>" + row[cell] + "</td>";
      });

      tableBody = tableBody + "</tr>";
    });
  }
}

jQuery("#usersTable").append(tableBody);

<table border='1' id="usersTable"></table>

JSFiddle

Working version based on feedback

Answer 1

forEach是数组的迭代方法，在提供的代码中，您试图将此方法应用于对象，这是一种错误的方法。要遍历对象属性，可以使用for (var key in object) {"code here"}。我已经更正了你的代码：

＆＃13;

＆＃13;

var obj = {
  "list": [{
      "name": "my Name",
      "id": 12,
      "type": "car owner"
    },
    {
      "name": "my Name",
      "id": 13,
      "type": "car owner2"
    },
    {
      "name": "my Name4",
      "id": 14,
      "type": "car owner3"
    },
    {
      "name": "my Name4",
      "id": 15,
      "type": "car owner5"
    }
  ]
};

var tableBody = "";
var columns = [];
var searchField = "name";
var searchVal = "my Name";

tableBody = tableBody + "<tr>";
for (var prop in obj.list[0]) {
  if (obj.list[0].hasOwnProperty(prop)) {
    tableBody = tableBody + ("<th>" + prop + "</th>");
    columns.push(prop);
  }
}

tableBody = tableBody + "</tr>";

for (var i = 0; i < obj.list.length; i++) {
  if (obj.list[i][searchField] == searchVal) {
    tableBody = tableBody + "<tr>";
    for (var key in obj.list[i]) {
      tableBody = tableBody + "<td>" + obj.list[i][key] + "</td>";
    };
    tableBody = tableBody + "</tr>"; 
  }
}

jQuery("#usersTable").append(tableBody);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1' id="usersTable"></table>

＆＃13;

＆＃13;

＆＃13;