对JSON对象数组按照某一属性进行排序(例：商品列表排序)

有时我在设计一些很多重复单元时，就会把重复的数据作为一个对象，然后将所有的单元作为一个JSON对象数组进行存储，然后自然地就会遇到排序的问题，这个排序其实也是比较常见的功能之一。此时就需要将JSON对象数组进行排序，然后将排序之后的JSON数组写入网页中。

---

使用JavaScript中数组的sort方法实现:

(1) 首先定义排序是升序还是降序:

	var sortIndex = "discount";
	var asce = function (x,y) {
            return (x[sortIndex] > y[sortIndex])? 1:-1
      		};
	var desc = function (x,y) {
            return (x[sortIndex] < y[sortIndex])? 1:-1
      		};
	

asce代表升序排序，desc代表降序排序,然后sortIndex代表我们排序的依据，这里的discount是JSON数组中的某个属性，代表根据discount来进行排序。

 arrayName.sort(asce);

将我们指定的升序或降序定义函数传入sort函数中，然后就可以对 arrayName这个数组按照我们的需求进行排序了。

---

一些有关的代码：
(1)当我们需要重新载入 (append) 排序之后的信息时，就需要将之前的信息删除，这里可以使用empty方法来清空父容器中的内容:

  $(".containerClass").empty();

containerClass是指盛放一个个子信息单元的父容器


(2)将JSON对象数组写入网页中：


这里举一个购物网站的例子
JSON数组内容：
里面是一些商品的图片以及价格等信息

var goodLists = [
    {"img" : "", "Price" : 179,"tempPrice":"798","discount":2.2,"description":" 恒源祥 | 2019春季新款V领桑蚕丝针织衫开衫女式针织衫"},
    {"img" : "", "Price" : 29, "tempPrice" : "99.9", "discount" : 1.36, "description" : "云麦 握力圈减压硅胶握力器手指康复专业训练手力男女健身便携小巧"},
    {"img" : "", "Price" : 999, "tempPrice" : "1999", "discount" : 6.5, "description" : "奥义 【口碑爆款】瑜伽脚蹬拉力器家用运动健身减肥仰卧起坐女器材用品"},
    {"img" : "", "Price" : 100, "tempPrice" : "120.5", "discount" : 7, "description" : "李宁 仰卧起坐辅助器材家用健身瘦肚子脚蹬拉力器瑜伽女卷腹弹力绳"},
    {"img" : "", "Price" : 199, "tempPrice" : "299", "discount" : 3.1415926, "description" : "索维尔 臂力器40/30/20kg50/60公斤男胸肌健身器材锻炼握力棒家用臂力棒"},
    {"img" : "", "Price" : 19999, "tempPrice" : "2999", "discount" : 1.234, "description" : "HUOBAN 负重绑腿可调节铅块隐形跑步负重装备沙袋运动训练健身装备2KG"},
    {"img" : "", "Price" : 9.9, "tempPrice" : "20", "discount" : 8, "description" : "云麦 握力圈减压硅胶握力器手指康复专业训练手力男女健身便携小巧"},
    {"img" : "", "Price" : 199, "tempPrice" : "299", "discount" : 3.1415926, "description" : "索维尔 臂力器40/30/20kg50/60公斤男胸肌健身器材锻炼握力棒家用臂力棒"},
    {"img" : "", "Price" : 19999, "tempPrice" : "2999", "discount" : 1.234, "description" : "HUOBAN 负重绑腿可调节铅块隐形跑步负重装备沙袋运动训练健身装备2KG"},
    {"img" : "", "Price" : 9.9, "tempPrice" : "20", "discount" : 8, "description" : "云麦 握力圈减压硅胶握力器手指康复专业训练手力男女健身便携小巧"},
    {"img" : "", "Price" : 199, "tempPrice" : "299", "discount" : 3.1415926, "description" : "索维尔 臂力器40/30/20kg50/60公斤男胸肌健身器材锻炼握力棒家用臂力棒"},
    {"img" : "", "Price" : 199, "tempPrice" : "299", "discount" : 3.1415926, "description" : "索维尔 臂力器40/30/20kg50/60公斤男胸肌健身器材锻炼握力棒家用臂力棒"},
    {"img" : "", "Price" : 19999, "tempPrice" : "2999", "discount" : 1.234, "description" : "HUOBAN 负重绑腿可调节铅块隐形跑步负重装备沙袋运动训练健身装备2KG"},
    {"img" : "", "Price" : 9.9, "tempPrice" : "20", "discount" : 8, "description" : "云麦 握力圈减压硅胶握力器手指康复专业训练手力男女健身便携小巧"},
    {"img" : "", "Price" : 19999, "tempPrice" : "2999", "discount" : 1.234, "description" : "HUOBAN 负重绑腿可调节铅块隐形跑步负重装备沙袋运动训练健身装备2KG"},
    {"img" : "", "Price" : 9.9, "tempPrice" : "20", "discount" : 8, "description" : "云麦 握力圈减压硅胶握力器手指康复专业训练手力男女健身便携小巧"},
    {"img" : "", "Price" : 199, "tempPrice" : "299", "discount" : 3.1415926, "description" : "索维尔 臂力器40/30/20kg50/60公斤男胸肌健身器材锻炼握力棒家用臂力棒"},
    {"img" : "", "Price" : 19999, "tempPrice" : "2999", "discount" : 1.234, "description" : "HUOBAN 负重绑腿可调节铅块隐形跑步负重装备沙袋运动训练健身装备2KG"},
    {"img" : "", "Price" : 9.9, "tempPrice" : "20", "discount" : 8, "description" : "云麦 握力圈减压硅胶握力器手指康复专业训练手力男女健身便携小巧"},
    {"img" : "", "Price" : 199, "tempPrice" : "299", "discount" : 3.1415926, "description" : "索维尔 臂力器40/30/20kg50/60公斤男胸肌健身器材锻炼握力棒家用臂力棒"},
    {"img" : "", "Price" : 199, "tempPrice" : "299", "discount" : 3.1415926, "description" : "索维尔 臂力器40/30/20kg50/60公斤男胸肌健身器材锻炼握力棒家用臂力棒"},
    {"img" : "", "Price" : 19999, "tempPrice" : "2999", "discount" : 1.234, "description" : "HUOBAN 负重绑腿可调节铅块隐形跑步负重装备沙袋运动训练健身装备2KG"},
    {"img" : "", "Price" : 9.9, "tempPrice" : "20", "discount" : 8, "description" : "云麦 握力圈减压硅胶握力器手指康复专业训练手力男女健身便携小巧"},
    {"img" : "", "Price" : 19999, "tempPrice" : "2999", "discount" : 1.234, "description" : "HUOBAN 负重绑腿可调节铅块隐形跑步负重装备沙袋运动训练健身装备2KG"},
    {"img" : "", "Price" : 9.9, "tempPrice" : "20", "discount" : 8, "description" : "云麦 握力圈减压硅胶握力器手指康复专业训练手力男女健身便携小巧"},
    {"img" : "", "Price" : 199, "tempPrice" : "299", "discount" : 3.1415926, "description" : "索维尔 臂力器40/30/20kg50/60公斤男胸肌健身器材锻炼握力棒家用臂力棒"},
    {"img" : "", "Price" : 199, "tempPrice" : "299", "discount" : 3.1415926, "description" : "索维尔 臂力器40/30/20kg50/60公斤男胸肌健身器材锻炼握力棒家用臂力棒"},
    {"img" : "", "Price" : 19999, "tempPrice" : "2999", "discount" : 1.234, "description" : "HUOBAN 负重绑腿可调节铅块隐形跑步负重装备沙袋运动训练健身装备2KG"},
    {"img" : "", "Price" : 9.9, "tempPrice" : "20", "discount" : 8, "description" : "云麦 握力圈减压硅胶握力器手指康复专业训练手力男女健身便携小巧"},
    {"img" : "", "Price" : 9.9, "tempPrice" : "20", "discount" : 8, "description" : "云麦 握力圈减压硅胶握力器手指康复专业训练手力男女健身便携小巧"},
];

利用字符串拼接，在script中将整个子单元(div形式)作为字符串形式保存到一个变量中，然后使用:

$(".containerClass").append(tempGood);

这里的tempGood就是拼接好的一个div的文本内容，通过遍历JSON对象数组来将所有子单元写入网页，拼接部分代码如下：

for(var good in goodLists){
        var tempGood = "
" + "
" + goodLists[good].img
            + "
" + "
" + "
" +
            "
直降
" +
            "
" +
            "" +
            "¥" +
            "" + goodLists[good].Price + "" +
            "" +
            "" +
            "
" +
            "" +
            "¥" +
            goodLists[good].tempPrice + "" +
            "" +
            goodLists[good].discount + "折" +
            "
" + "
" +
            "
" +
            "
 +
            goodLists[good].description + "\">" + goodLists[good].description +
            "
" +
            "
" +
            "
" +
            "
" +
            "" +
            "" +
            "" +
            "" +
            "" +
            "唯品国际" +
            "" +
            "商家发货" +
            "预售" +
            "" +
            "
" +
            "
" +
            "
";

        $(".goods").append(tempGood);

    }

绿色的部分只是构成子单元的整体设计，白色部分才是从JSON数组中读取的“活”的数据。


完整的JavaScript代码(github) : 点这里

---

在设计具有多种排序功能的网页区域时，可以首先按照默认的顺序将数据写入，然后将排序做成函数，使用点击元素来调用，需要排序时先将子单元全部删除然后再将排序后的JSON对象数组使用一样的方法写入即可。