在以 HTML 显示之前转换 JSON 数据答案

【问题标题】：Converting JSON data before displaying in HTML在以 HTML 显示之前转换 JSON 数据
【发布时间】：2015-07-07 00:08:55
【问题描述】：

我有一些以这种格式返回的数据：

[{
label: "Store Name",
address: "123 Somewhere Blvd",
city: " Atlanta",
state: "11",
zip: "30333"
}]

我想知道是否有办法将“州”部分转换为州名而不是其 ID 号。 我的数据库中有一个表格，可以将状态与 ID 相匹配，并且我已经能够使用 PHP 转换 php 中的状态。我确实读过某个地方，我无法将 php 代码放入我的jQuery 代码所以我有点卡在那里。

在我的示例中，我使用 ajax 自动完成脚本提取商店列表，并使用以下代码处理我的输出：

function myFunction() {
if (searchValue.length > 3) {
  var acs_action = 'autocompletesearch';

  $.ajax({
    async: false,
    url: MyAcSearch.url+'?action='+acs_action+'&term=' + searchValue,
    type: 'POST',
    data: {
      name: searchValue
    },
    success: function (results) {
      var data = $.parseJSON(results); 

      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          var item = data[i];
          html += '<li>';
          html += '<div class="row">';
          html += '<div class="col-sm-9">';
          html += ' <h3>' + item.label + '</h3>' ;
          html += ' <span>' + item.city + ' , ' + item.state + ' , ' + item.zip + '</span>';
          html += '</div>';
          html += '</div>';
          html += '</li>';
        }
      }
    }
  });
} 
}

结果按预期返回，返回的是 ID 号，而不是州名。有没有办法在显示之前捕获状态 id 值并将其转换为状态名称？我试过研究一些不同的东西，但我觉得我走错了方向。任何帮助，将不胜感激。谢谢你

****我可能完全用错了方法。任何方向将不胜感激****

【问题讨论】：

是的，SQL join 语句将帮助您将每个具有特定状态 id 的元组与状态表中的相应元组连接起来，w3schools.com/sql/sql_join.asp
感谢您的评论。我熟悉JOINS。我可以在我的 AJAX 请求中应用 JOIN 吗？
你这里混的东西，AJAX请求是对服务器的普通HTTP请求，除了它可以异步完成（你不需要刷新浏览器，就像你发送了一些在浏览器中播放时为您带来一些东西），因此您可以在服务器端做任何您想做的事情（查询可以包含选择、连接、排序...数据库驱动程序支持的任何查询)
所以你只需要打开文件MyAcSearch.url+'?action='+acs_action+'&term=' + searchValue，修改查询使其也返回状态名称

标签： php jquery ajax json

【解决方案1】：

如果您控制数据的来源（无论发送什么 state: "11"），那么您最好的选择是更新该脚本以使用或代替状态 ID 返回状态名称。

如果您无法控制数据源，一种选择是在 PHP 中创建一个包含所有状态 ID/名称的数组，对该数组进行 JSON 编码并将其打印为 javascript，然后查看必要时通过 ID 设置适当的州名：

<?php
$array = [..., '11'=>'Delaware', '12'=>'Florida', ...];
?>
<html>
    <head>
        <script>
        var States = <?php echo json_encode($array); ?>;
        </script>

        ...

        <script>
        function myFunction() {
            ...
            html += ' <span>' + item.city + ' , ' + States[item.state] + ' , ' + item.zip + '</span>';
            ...
        }
        </script>
    </head>
    ...
</html>

【讨论】：