防止Javascript重新排序JSON

时间:2019-01-25 15:11:39

标签: javascript json

我有以下两个JSON映射:

{
  "1000006": "Alternate Business Phone",
  "1000008": "Alternate Home Phone",
  "1000001": "Business Phone",
  "1000003": "Clinic Phone",
  "3": "Facsimile",
  "1000007": "Home Phone",
  "1000004": "Lab Phone",
  "4": "Pager",
  "1000002": "Secure Msg Phone"
}

{
  "6": "Business Email",
  "1000005": "Deliver To Email",
  "7": "Personal Email"
}

哪些键值映射按值字母顺序排列。我正在使用这两个来基于另一个下拉菜单的选定项目更改下拉菜单的内容。图片说明:


已选择手机

enter image description here


已选择电子邮件

enter image description here


但是,正如您在图像中看到的那样,列表项的顺序并未保留。

我处理列表项的Javascript是这样的:

  var options_1 = {"1000006":"Alternate Business Phone","1000008":"Alternate Home Phone","1000001":"Business Phone","1000003":"Clinic Phone","3":"Facsimile","1000007":"Home Phone","1000004":"Lab Phone","4":"Pager","1000002":"Secure Msg Phone"};
  var options_2 = {"6":"Business Email","1000005":"Deliver To Email","7":"Personal Email"};
  function changePhoneEmailItems()
  {
    var selectedItem = document.getElementById("addNewCategory").value;
    var options;
    if('1' === selectedItem) {
        options = options_1;
    } else {
        options = options_2;
    }
    var list = document.getElementById("addNewUsageType");
    list.options.length=0;
    for(var i in options) {
        list.add(new Option(options[i], i));
    }
  }

根据this StackOverflow answer,我需要更改我正在使用的数据结构,因为根据定义,JSON是无序的。

我尝试将JSON更改为new Map

var options_1 = {"1000006":"Alternate Business Phone","1000008":"Alternate Home Phone","1000001":"Business Phone","1000003":"Clinic Phone","3":"Facsimile","1000007":"Home Phone","1000004":"Lab Phone","4":"Pager","1000002":"Secure Msg Phone"};
var options_2 = {"6":"Business Email","1000005":"Deliver To Email","7":"Personal Email"};
var options_1_map = new Map(options_1);
console.log(options_1_map);

但是它抛出了一个错误:

TypeError: options_1 is not iterable

如何更改JSON对象以保留原始顺序?

注意:我的JSON来自一个Spring控制器,该控制器正在“包装” JSON中的地图以发送到视图。但是,如果有更明智的方法可以将地图从控制器传输到视图,则我可以修改控制器。

编辑: 出于良好的考虑,生成JSON的控制器代码为:

for(int i = 1; i <= 2; i++) {
    JsonObject json = new JsonObject();
    HashMap<String, String> CDCONTMETHTP = (HashMap<String, String>)model.get("CDCONTMETHTP_" + i);
    for(Entry<String, String> option : CDCONTMETHTP.entrySet()) {
        json.addProperty(option.getKey(), option.getValue());
    }
    model.put("options_" + i, json);
}

我可以根据需要进行修改。

3 个答案:

答案 0 :(得分:6)

您的JSON映射是键-值对,无法保留键的顺序。您可以将JSON映射转换为Array保留顺序。

代替此JSON:

{
  "6": "Business Email",
  "1000005": "Deliver To Email",
  "7": "Personal Email"
}

发送此JSON:

[
  {"id": 6, "text": "Business Email"},
  {"id": 1000005, "text": "Deliver To Email"},
  {"id": 7, "text": "Personal Email"}
]

答案 1 :(得分:0)

Like someone said here;只需将_放在数字之前。

o /祝你有美好的一天

答案 2 :(得分:0)

David的答案起作用了,但并非没有修改遍历元素的for循环。我已经在此处发布了完整的解决方案:

var options_1 = {"1000006":"Alternate Business Phone","1000008":"Alternate Home Phone","1000001":"Business Phone","1000003":"Clinic Phone","3":"Facsimile","1000007":"Home Phone","1000004":"Lab Phone","4":"Pager","1000002":"Secure Msg Phone"};
var options_2 = {"6":"Business Email","1000005":"Deliver To Email","7":"Personal Email"};
function changePhoneEmailItems()
{
    var selectedItem = document.getElementById("addNewCategory").value;
    var options;
    if('1' === selectedItem) {
        options = options_1;
    } else {
        options = options_2;
    }

    var list = document.getElementById("addNewUsageType");
    list.options.length=0;
    Object.keys(options).forEach(function(i) {
        list.add(new Option(options[i].value, options[i].key))          
    });
}