如何使用 Mysql 将 JSON 数据从 PHP 解析为 JS？

Question

我有一个自动生成选择 html 标记并级联 3 个下拉列表的 JS。现在，我正在尝试使用 json_encode 通过 Mysql 数据库填充下拉列表的数据，但我没有运气。

如何将json_encode从PHP正确解析为JS以使用Mysql自动填充下拉列表？

请帮帮我。

PHP：

$result_region = $wpdb->get_results('SELECT DISTINCT state, city, avenue FROM tablename', OBJECT);
foreach($output as $rows){
$data[] = array('state'=> $rows->state, 'city' => $rows->city,'avenue'=> $rows->avenue);
}
echo json_encode($data);

手动编码数据的工作示例JS：

var data = getData();

var container = document.querySelector("#sl_form");

// initialize select-boxes with data
initSelect(data);

// reads the data and creates the DOM elements (select-boxes and their relevant options)
function initSelect(data) {
  var p, select, option, input, filteredOptions;
  for (var key in data) {
    p = document.createElement("p");
    p.innerHTML = key;
    select = document.createElement("select");
    select.name = key;
    container.appendChild(p);
    container.appendChild(select);
    filteredOptions = optionFilter(data[key].availableOptions, data[data[key].parent], data[key]);
    input = document.querySelector('select[name="' + key + '"');
    input.setAttribute("onchange", "updateSelect(this)");
    for (var i = 0; i < filteredOptions.length; i++) {
      option = document.createElement("option");
      option.value = filteredOptions[i].value;
      option.innerHTML = filteredOptions[i].value;
      input.appendChild(option);
    }
    input.options.selectedIndex = getSelectedIndex(filteredOptions, data[key]);
    input.setAttribute('model', data[key].selectedOption.value);
  }
}


// this function will be called on change of select-box
function updateSelect(element) {
  var input, option;
  setSelectedOption(element);
  for (var key in data) {
    filteredOptions = optionFilter(data[key].availableOptions, data[data[key].parent], data[key]);
    input = document.querySelector('select[name="' + key + '"');
    while (input.firstChild) {
      input.removeChild(input.firstChild);
    }
    for (var i = 0; i < filteredOptions.length; i++) {
      option = document.createElement("option");
      option.value = filteredOptions[i].value;
      option.innerHTML = filteredOptions[i].value;
      input.appendChild(option);
    }
    input.options.selectedIndex = getSelectedIndex(filteredOptions, data[key]);
    input.setAttribute('model', data[key].selectedOption.value);
  }
}

// set the selected-option of select-box when it's changed
function setSelectedOption(element) {
  var inputName = element.getAttribute("name");
  var inputValue = getSelectedText(element);
  var inputItem = data[inputName];
  var selectedOption, filteredOptions;

  // setting selected option of changed select-box
  for (var i = 0; i < inputItem.availableOptions.length; i++) {
    if (inputValue === inputItem.availableOptions[i].value) {
      inputItem.selectedOption = inputItem.availableOptions[i];
      break;
    }
  }
  // setting child object selected option now
  for (var key in data) {
    if (data[key].parent === inputName) {
      filteredOptions = optionFilter(data[key].availableOptions, data[data[key].parent], data[key]);
      data[key].selectedOption = filteredOptions[0];
    }
  }
}

// get the text of select-box
function getSelectedText(element) {
  if (element.selectedIndex == -1) {
    return null;
  }
  return element.options[element.selectedIndex].text;
}

function getSelectedIndex(options, self) {
  var index;
  for (var i = 0; i < options.length; i++) {
    if (self.selectedOption.value === options[i].value) {
      index = i;
      break;
    }
  }
  return index;
}

// get filtered options based on parent's selected value
function optionFilter(items, parent, self) {
  var result = [];
  if (typeof parent !== "undefined") {
    for (var i = 0; i < items.length; i++) {
      if (typeof parent.selectedOption !== "undefined") {
        if (parent.selectedOption !== null && items[i].parentValue === parent.selectedOption.value) {
          result.push(items[i]);
        }
      }
    }
    if (typeof self.selectedOption === "undefined") {
      self.selectedOption = null;
    }
    if (self.selectedOption === null) {
      self.selectedOption = result[0];
    }
    return result;
  } else {
    return items;
  }
}

Answer 1

如下更改您的 foreach 循环。它将返回所有值。您在 foreach 循环中覆盖了值。

foreach($result_region as $row){
    $data[] = ['sl_region'=> $row->sl_region,
              'sl_city' => $row->sl_city,'sl_mall'=> $row->sl_mall];
}

如果您的 php 版本低于 5.4，则使用

foreach($result_region as $row){
    $data[] = array('sl_region'=> $row->sl_region,
              'sl_city' => $row->sl_city,'sl_mall'=> $row->sl_mall);
}