$.parseJSON 改变关联数组的顺序答案

【问题标题】：$.parseJSON changes associative array order$.parseJSON 改变关联数组的顺序
【发布时间】：2020-02-29 08:55:52
【问题描述】：

我通过 AJAX 收到按字母顺序（按值）排序的 json：

console.log(data);

其中显示：

{"0":"","23":"Granta","20":"Vesta SW Cross","24":"Zetta"}

但是当我解析它时：

var models = $.parseJSON(data);
console.log(models);

它打破了字母顺序并显示：

Object { 0: "", 20: "Vesta SW Cross", 23: "Granta", 24: "Zetta" }

然后我填充一个选择元素：

$.each(models, function(key, value) {
    model.append($('<option></option>').text(value).val(key));
});

有没有办法再次按值的字母顺序对这些选项进行排序？

【问题讨论】：

您的数据来自哪里？看起来它来自一个经过排序和过滤而没有重新索引的数组。对后端的小改动可以为您提供一个保证排序的数组
JSON object being reordered by Javascript的可能重复
数据已经按正确的顺序排序，它是按值排序的。问题是解析的对象没有被索引，我需要再次按字母顺序对其进行排序。顺序不重要，我只需要按值按字母排序
你控制后端代码吗？是PHP吗？如果您回答“是”，使用 array_values() 的小改动可以解决您的问题，例如将echo json_encode($models); 更改为echo json_encode(array_values($models));
要不然试试const options = Object.values(models).sort()

标签： jquery arrays json sorting parsing

【解决方案1】：

如果您必须在客户端执行所有操作，则可以转换和排序原始响应

$.getJSON(url).done(models => {
  const sorted = Object.entries(models).sort(([k1, v1], [k2, v2]) =>
      v1.localeCompare(v2))
  model.append(sorted.map(([value, text]) => $('<option>', { value, text })))
})

否则，我建议在源头修复此问题以返回更全面的数据模型。

例如，假设你有类似的东西

$models = [
    0  => '',
    23 => 'Granta',
    20 => 'Vesta SW Cross',
    24 => 'Zetta'
];

将其映射到更好的数据结构，例如

$data = [];
foreach ($models as $value => $text) {
    $data[] = ['value' => $value, 'text' => $text];
}
header('Content-type: application/json');
echo json_encode($data);
exit;

这将产生一个类似的 JSON 字符串

[
  {
    "value": 0,
    "text": ""
  },
  {
    "value": 23,
    "text": "Granta"
  },
  {
    "value": 20,
    "text": "Vesta SW Cross"
  },
  {
    "value": 24,
    "text": "Zetta"
  }
]

有序且包含您需要的所有数据

$.getJSON(url).done(models => {
  model.append(models.map(props => $('<option>', props)))
})

【讨论】：