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

Posted 2023-05-08

【中文标题】$.parseJSON 改变关联数组的顺序

【英文标题】：$.parseJSON changes associative array order

【发布时间】：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()

【参考方案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)))
)