javascript - 循环遍历 json_encode 的输出

Question

我正在尝试让这个解决方案发挥作用:https://stackoverflow.com/a/30400111/4532066

我有一个简单的选择菜单:

<select class='form-control' id='builders' name='builder_id'>
    <option value="1">Oracle</option>
    <option value="2">SQL</option>
</select>

我想使用第一个 SELECT 中的 ID 来更改 ID 为“regions”的第二个 SELECT 的内容

这是我正在使用的 jQuery 代码:

$(document).ready(function() {
  $('#builders').change(function() {
    var currentValue = $(this).val();
    $.get("ajax_cats.php", {
      'builder_id': currentValue
    }, function(data) {
      var regions = $.parseJSON(data);
      $('#regions').empty();
      for (var i = 0; i < regions.length; i++) {
        var regionOption = '<option value="' + regions[i]['fld_label'] + '">';
        regionOption += regions[i]['fld_label'];
        regionOption += '</option>';
        $('#regions').append(regionOption);
      }
    });
  });
});

这是“ajax_cats.php”的内容

 $sql = "SELECT cats.fld_label
           FROM tbl_b_cats cats
          WHERE cats.fld_parent = ? 
       ORDER BY cats.fld_label";

/* initialise */
$stmt = $conn->stmt_init();

/* prepare */
if (!$stmt->prepare($sql)) {
    throw new Exception("Error preparing statement: $stmt->error, SQL query: $sql");
}

/* bind */
if (!$stmt->bind_param('s', $_GET['builder_id'])) {
    throw new Exception("Error binding parameter: $stmt->error");
}

/* execute & store */
$stmt->execute();
$stmt->store_result();

/* 404 for no results */
if ($stmt->num_rows == 0) {
    header('HTTP/1.0 404 Not Found');
    exit;
} else {

    $regions = array();

    /* get results */
    $stmt->bind_result($fld_label);

    while ($stmt->fetch()) {
        $regions['fld_label'][]   = $fld_label;
    }

    //print_r(array_values($regions));
    //$bob = json_encode($regions);
    //r($bob);
    echo json_encode($regions);

}
/* free and close */
$stmt->free_result();
$stmt->close();

$conn -> close();

我已经确认“ajax_cats.php”返回的数据是JSON格式 - 例如

{
    "fld_label": ["AP", "AR", "EAM", "GL", "HR", "INV", "Other", "PA", "PO", "SysAdmin"]
}

我认为问题出在 jQuery 中，这部分是:

var regions = $.parseJSON(data);
$('#regions').empty();
for (var i = 0; i < regions.length; i++) {
    var regionOption = '<option value="'+regions[i]['fld_label']+'">';
    regionOption += regions[i]['fld_label'];
    regionOption += '</option>';
    $('#regions').append(regionOption);
}

从昨天阅读 S/Overflow 的内容来看，“长度”选项仅在您使用数组时才有效。

因为如果我这样做:

console.log(regions.length);

它返回“未定义”

我想知道如何解决这个问题？

谢谢

Answer 1

需要进行一些调整:

1. 将 varregions = $.parseJSON(data); 更改为 varregions = $.parseJSON(data).fld_label;。这将为您提供区域数组。
2. 然后将 regions[i]["fld_label"] 更改为 regions[i]

代码片段:

var data = "{ \"fld_label\": [\"AP\", \"AR\", \"EAM\", \"GL\", \"HR\", \"INV\", \"Other\", \"PA\", \"PO\", \"SysAdmin\"]}";

var regions = $.parseJSON(data).fld_label; // To get the array ["AP", "AR, ...]

$('#regions').empty();

for (var i = 0; i < regions.length; i++) {
  var regionOption = '<option value="' + regions[i] + '">';
  regionOption += regions[i];
  regionOption += '</option>';
  $('#regions').append(regionOption);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="regions"></select>