用数组对象填充选择选项

Question

我正在重用一个返回数组对象的函数，如下所示：75: {id: 75, table_no: 40, capacity: 4, shape: "circle", time: null, …}76: {id: 76, table_no: 41, capacity: 4, shape: "circle", time: null, …}77: {id: 77, table_no: 44, capacity: 4, shape: "circle", time: null, …}78: {id: 78, table_no: 45, capacity: 4, shape: "circle", time: null, …}79: {id: 79, table_no: 42, capacity: 6, shape: "large_rectangle", time: null, …}80: {id: 80, table_no: 43, capacity: 6, shape: "large_rectangle", time: null, …}__proto__: Object正如您在每个数组中看到的那样，有一个 id 和表编号，我想使用这些值来填充<select>输入。我已经尝试了一切，map()，for 循环，$.each(). 我什至无法显示result.length，因为它返回未定义。这是我的代码$.ajax({  type: 'POST',  url: "/modules/ajax/ajax_handler.php",  data: data}).done((result) => {  if(result) {    result = JSON.parse(result);    console.log(result);    var select = $('#table');    result.map(item => {      console.log(item);    })  }})PHPfunction getPremiseTablesByArea($connection, $id) {  $tables = NULL;  $query = "SELECT t.id, t.number, t.capacity, t.shape, t.time_duration, t.joinable,                   t.area, t.baby_friendly, t.premise_code, a.name, p.name            FROM tables t            JOIN areas a ON a.id = t.area            JOIN premises p ON p.code = t.premise_code WHERE t.area = ?";  if($stmt = $connection->prepare($query)){    $stmt->bind_param('s', $id);    $stmt->execute();    $stmt->bind_result($id, $number, $capacity, $shape, $time, $joinable, $area, $babyFriendly, $premiseCode, $areaName, $premiseName);    while($stmt->fetch()){      $tables[$id]['id'] = $id;      $tables[$id]['table_no'] = $number;      $tables[$id]['capacity'] = $capacity;      $tables[$id]['shape'] = $shape;      $tables[$id]['time'] = $time;      $tables[$id]['joinable'] = $joinable;      $tables[$id]['area'] = $area;      $tables[$id]['baby_friendly'] = $babyFriendly;      $tables[$id]['premise_code'] = $premiseCode;      $tables[$id]['area_name'] = $areaName;      $tables[$id]['premise_name'] = $premiseName;    }    $stmt->close();  }  return $tables;}

Answer 1

你可以使用object.values()和forEach

select=document.getElementById("select")

   

 obj={0:{id: 75, table_no: 40, capacity: 4, shape: "circle", time: null}, 1:{id: 76, table_no: 41, capacity: 4, shape: "circle", time: null}, 2:{id: 77, table_no: 44, capacity: 4, shape: "circle", time: null}, 3:{id: 78, table_no: 45, capacity: 4, shape: "circle", time: null}, 4:{id: 79, table_no: 42, capacity: 6, shape: "large_rectangle", time: null}, 5:{id: 80, table_no: 43, capacity: 6, shape: "large_rectangle", time: null,}}

  Object.values(obj).forEach(o=>{

  var option = document.createElement("option")

  option.text= o.table_no

  option.value = o.id

  select.appendChild(option)})

<select id="select">  

</select>

Answer 2

您可以更改 PHP 以返回一个对象数组：

while($stmt->fetch()){

  $tables[$id]['id'] = $id;

  $tables[$id]['table_no'] = $number;

  $tables[$id]['capacity'] = $capacity;

  $tables[$id]['shape'] = $shape;

  $tables[$id]['time'] = $time;

  $tables[$id]['joinable'] = $joinable;

  $tables[$id]['area'] = $area;

  $tables[$id]['baby_friendly'] = $babyFriendly;

  $tables[$id]['premise_code'] = $premiseCode;

  $tables[$id]['area_name'] = $areaName;

  $tables[$id]['premise_name'] = $premiseName;

}

成为

$tables = $stmt->fetchAll(PDO::FETCH_ASSOC);

（但是，您的字段名称会略有不同，如果它们需要相同，请使用 AS 为查询中的字段名称添加别名）。

现在您可以在生成的 javascript 数组上自由使用 map 了。