Jquery+json输出的顺序能否按照原始顺序？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery+json输出的顺序能否按照原始顺序？相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function LinkageSelect(options)
items =
'0':2:'电脑',3:'手机',1:'电视';

function _bind(element , value)
_fill(element , '0' , value);



function _fill(element , key , value)
var json = _find(key , function()
_fill(element , key , value);
);

for(var opt_value in json)
var opt_title = json[opt_value];
var option = $('<option value="' + opt_value + '" ' + '>' + opt_title + '</option>');
element.append(option);



function _find(key , callback)
return items[key];


function _getEl(element)
return $(element);


return
bind : function(element , value)
element = _getEl(element);
value = '';
_bind(element , value);




$(function()
var sel = new LinkageSelect();
sel.bind('.level_1');
)
</script>
</head>
<body>
<select class="level_1"></select>
</body>
</html>

代码如上（可以存为.htm格式用浏览器打开），当前运行得到的结果如下：
<select class="level_1">
<option value="1">电视</option>
<option value="2">电脑</option>
<option value="3">手机</option>
</select>
要求：
items =
'0':2:'电脑',3:'手机',1:'电视';
这个不能改，要求改其它代码，我想要的结果是：
<select class="level_1">
<option value="2">电脑</option>
<option value="3">手机</option>
<option value="1">电视</option>
</select>
也就是说，根据items中的json数据的原始顺序排序。
请问我的代码应该如何变？
http://www.raychou.com/chou/posts/317.htm
我的代码是以上代码里的节选。
请帮我修改LinkageSelect.js里的代码，或者改<script type="text/javascript">之间的代码也可以。

请尽量不要给我其它的解决方案，谢谢！

参考技术A 你好！！

你的想法是好的，不过可悲的是，属性名为数字的，注定了它会按顺序排列的·····
如果在 items 不能改变的情况下，“请帮我修改LinkageSelect.js里的代码，或者改<script type="text/javascript">之间的代码也可以。”，一般人恐怕完成起来很有难度····

你给的网址，我看了下，注意到它的数据中的属性民确实也为数字，但是它的顺序是递增的，所以说人家的顺序其实是排好了的······

解决你的这个问题，最简单的方式就是修改 items，可以将属性名改为"字符+数字"的方式，然后在进行 填充option时进行处理···

只能说这么多了····本回答被提问者采纳 参考技术B 可以从后台往前台输入

前台代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

</head>
<body>
<form runat="server">
<div id="jsonContent" runat="server">
</div>
</form>
</body>
</html>

后台代码
页面加载的时候显示

if (!IsPostBack)

string str = " '2': '电脑', '3': '手机', '1': '电视' ";
string content = "<select class=\"level_1\">";
JavaScriptSerializer js = new JavaScriptSerializer();
Dictionary<string, object> dict = (Dictionary<string, object>)js.DeserializeObject(str);
foreach (KeyValuePair<string,object> item in dict)

content += string.Format("<option value=\"0\">1</option>",item.Key,item.Value);

content += "</select>";
this.jsonContent.InnerHtml = content;
 参考技术C element.prepend(option); append换成prepend

jQuery - 按时间顺序对任何给定的 JSON 进行排序

【中文标题】jQuery - 按时间顺序对任何给定的 JSON 进行排序【英文标题】：jQuery - sort any given JSON chronologically 【发布时间】：2021-07-10 11:09:32 【问题描述】：

我有这个 JSON 数组，我正在尝试将它渲染到 chartistJs 中。但是，此 JSON 的结果未按时间顺序格式化。

[
    "May2021": "181287.56",
    "Mar2021": "94824.95",
    "Feb2021": "79316.17",
    "Apr2021": "107782.89",
    "Jan2021": "94802.65",
    "Jun2021": "100671.2"
]

我拥有的 jQuery 逻辑是捕获月份值并将其呈现为 X 和 Y 轴系列。

$(document).ready(function () 
  var months = 
    Jan: 0,
    Feb: 1,
    Mar: 2,
    Apr: 3,
    May: 4,
    Jun: 5,
    Jul: 6,
    Aug: 7,
    Sep: 8,
    Oct: 9,
    Nov: 10,
    Dec: 11
  ;

  $.ajax(
    url:
      "https://flci9mttga.execute-api.ap-south-1.amazonaws.com/poc/costAggregateAPI",
    type: "GET",
    dataType: "json",
    async: true,
    crossDomain: true,
    success: function (response) 
      //console.log(response);
      var arrLabels = [],
        arrShortLabels = [],
        arrSeries = [],
        arrSortedSerise = [];

      $.map(response, function (item, index) 
        var dtM = item.substring(0, 3);
        var dtY = item.substring(3, 7);

        arrLabels.push(new Date(dtY, months[dtM]));
        arrShortLabels.push(new Date(dtY, months[dtM]).toDateString("MMYYYY"));
        arrSeries.push(item.Y);
      );

      arrShortLabels.sort(function (x, y) 
        let a = new Date(x),
          b = new Date(y);
        return a - b;
      );

      var data = 
        labels: arrShortLabels,
        series: arrSeries
      ;
      demo.initDocChartist(data);
    
  );
);

ChartistJS 插件代码如下-

initDocChartist: function (data) 
    var dataSales = 
      labels: data.labels,
      series: [data.series]
    ;

    var optionsSales = 
      lineSmooth: false,
      low: 0,
      high: 120000,
      showArea: true,
      height: "245px",
      axisX: 
        showGrid: false
      ,
      lineSmooth: Chartist.Interpolation.simple(
        divisor: 3
      ),
      showLine: false,
      showPoint: false
    ;

    var responsiveSales = [
      [
        "screen and (max-width: 640px)",
        
          axisX: 
            labelInterpolationFnc: function (value) 
              return value[0];
            
          
        
      ]
    ];

    Chartist.Line("#chartHours", dataSales, optionsSales, responsiveSales);

如果有人能帮我解决这个问题，我们将不胜感激

【问题讨论】：

如果您可以确保这些对象始终只包含一个表示日期字符串的键，您可以使用Object.keys(o)[0] 来访问该键。然后使用日期库或什至仅使用 Date 构造函数解析密钥（我不会这样做...）new Date(key)，然后您可以将日期与date1.getTime() - date2.getTime() 进行比较。 【参考方案1】：

使用标准的日期格式，例如 ISO

手动输入数据且不懂编程的人有时只会将日期写为“Mar2020”，因为他们总是打算仅手动解释它。

但是，作为一名程序员，您应该尝试始终以易于自动解释的明确方式存储信息。

我建议你把月份单词+年份，转换成如下数字格式：

 yyyy-mm

这很好，因为：

这对于来自任何人类语言的程序员来说都是明确的 一般人都能理解 如果您按字母顺序排序，它会自动按日期顺序排列 它是 ISO 1601 日期格式的第一部分，在计算中得到广泛理解和使用。

你快到了

而不是使用toDateString 进行转换，而是应用任意不可排序的方案，例如“mmyyyy”，使用

.toDateString("MMYYYY")

...试试吧：

.toISOString().slice(0,7)

生成的结构只是一个字符串，这意味着它是

易于明确存储

容易理解

不存在日期类型有时会出现的时区问题

您可以在编辑器中使用 图标发布您的代码

人们会发现测试您的代码更容易，因此会更鼓励为您修改它。

【讨论】：

以上是关于Jquery+json输出的顺序能否按照原始顺序？的主要内容，如果未能解决你的问题，请参考以下文章

js 如何遍历对象的属性名，而且按照顺序输出

使用 jQuery DataTables 恢复原始排序顺序

对 JSON 进行排序或按原始顺序获取 JSON [重复]

jQuery - 按时间顺序对任何给定的 JSON 进行排序

jQuery prepend() 和 JSON 的顺序错误

SwiftyJson 导致 UITableView 顺序错误