javascript - 显示排序后的 json 数据 onclick

Question

如何在点击时对 JSON 数据进行排序以及如何在页面中显示它？

var arr = [{
  "engine": "Gecko",
  "browser": "Firefox 1.0",
  "platform": "Win 98+ / OSX.2+",
  "version": "1.7",

}, {
  "engine": "Gecko",
  "browser": "Firefox 1.5",
  "platform": "Win 98+ / OSX.2+",
  "version": "1.8",

}, {
  "engine": "Gecko",
  "browser": "Firefox 2.0",
  "platform": "Win 98+ / OSX.2+",
  "version": "1.8",

}, {
  "engine": "Gecko",
  "browser": "Firefox 3.0",
  "platform": "Win 2k+ / OSX.3+",
  "version": "1.9",

}];

for (var n = 0; n < arr.length; n++) {
  document.write("<ul>" + 
                 "<li  id='first'>" + arr[n].engine + " " + "</li>" + 
                 "<li  id='second'>" + " " + arr[n].browser + " " + "</li>" +
                 "<li id='third'>" + arr[n].platform + " " + "</li>" + 
                 "<li id='fourth'>" + arr[n].version + " " + "</li>" + "</ul>");
}

function SortByEngine(x, y) {
  return ((x.engine == y.engine) ? 0 : ((x.engine > y.engine) ? 1 : -1));
}

function SortByBrowser(x, y) {
  return ((x.browser == y.browser) ? 0 : ((x.browser > y.browser) ? 1 : -1));
}

function SortByPlatform(x, y) {
  return ((x.platform == y.platform) ? 0 : ((x.platform > y.platform) ? 1 : -1));
}

function SortByVersion(x, y) {
  return ((x.version == y.version) ? 0 : ((x.version > y.version) ? 1 : -1));
}

arr.sort(SortByBrowser);
arr.sort(SortByEngine);
arr.sort(SortByPlatform);
arr.sort(SortByVersion);

Answer 1

这是一个UL版本

var arr = [{
    "engine": "Gecko",
        "browser": "Firefox 1.0",
        "platform": "Win 98+ / OSX.2+",
        "version": "1.7",

}, {
    "engine": "Gecko",
        "browser": "Firefox 1.5",
        "platform": "Win 98+ / OSX.2+",
        "version": "1.8",

}, {
    "engine": "Gecko",
        "browser": "Firefox 2.0",
        "platform": "Win 98+ / OSX.2+",
        "version": "1.8",

}, {
    "engine": "Gecko",
        "browser": "Firefox 3.0",
        "platform": "Win 2k+ / OSX.3+",
        "version": "1.9",

}];

function writeTb() {
    var uls = [];
    for (var n = 0; n < arr.length; n++) {
        uls.push("<ul><li>" + arr[n].engine + "</li>" +
            "<li>" + arr[n].browser + "</li>" +
            "<li>" + arr[n].platform + "</li>" +
            "<li>" + arr[n].version + "</li></ul>");
    }
    content.innerHTML = uls.join('');
}

function SortByEngine(x, y) {
    return ((x.engine == y.engine) ? 0 : ((x.engine > y.engine) ? 1 : -1));
}

function SortByBrowser(x, y) {
    return ((x.browser == y.browser) ? 0 : ((x.browser > y.browser) ? 1 : -1));
}

function SortByPlatform(x, y) {
    return ((x.platform == y.platform) ? 0 : ((x.platform > y.platform) ? 1 : -1));
}

function SortByVersion(x, y) {
    return ((x.version == y.version) ? 0 : ((x.version > y.version) ? 1 : -1));
}

var content;
window.onload = function () {
    content = document.getElementById("content");
    writeTb();
    document.getElementById("browser").onclick = function () {
        arr.sort(SortByBrowser);
        writeTb();
    }
    document.getElementById("engine").onclick = function () {
        arr.sort(SortByEngine);
        writeTb();
    }
    document.getElementById("platform").onclick = function () {
        arr.sort(SortByPlatform);
        writeTb();
    }
    document.getElementById("version").onclick = function () {
        arr.sort(SortByVersion);
        writeTb();
    }
}

ul li{
  display: inline;
}

<ul>
    <li id="engine">Engine</li>
    <li id="browser">Browser</li>
    <li id="platform">Platform</li>
    <li id="version">Version</li>
</ul>
<div id="content"></div>

这是一个表格版本。

var arr = [{
  "engine": "Gecko",
  "browser": "Firefox 1.0",
  "platform": "Win 98+ / OSX.2+",
  "version": "1.7",

}, {
  "engine": "Gecko",
  "browser": "Firefox 1.5",
  "platform": "Win 98+ / OSX.2+",
  "version": "1.8",

}, {
  "engine": "Gecko",
  "browser": "Firefox 2.0",
  "platform": "Win 98+ / OSX.2+",
  "version": "1.8",

}, {
  "engine": "Gecko",
  "browser": "Firefox 3.0",
  "platform": "Win 2k+ / OSX.3+",
  "version": "1.9",

}];

function writeTb() {
  var rows = [];
  for (var n = 0; n < arr.length; n++) {
    rows.push("<tr><td>" + arr[n].engine   + "</td>" + 
                  "<td>" + arr[n].browser  + "</td>" + 
                  "<td>" + arr[n].platform + "</td>" + 
                  "<td>" + arr[n].version  + "</td></tr>");
  }
  tbody.innerHTML = rows.join("");
}

function SortByEngine(x, y) {
  return ((x.engine == y.engine) ? 0 : ((x.engine > y.engine) ? 1 : -1));
}

function SortByBrowser(x, y) {
  return ((x.browser == y.browser) ? 0 : ((x.browser > y.browser) ? 1 : -1));
}

function SortByPlatform(x, y) {
  return ((x.platform == y.platform) ? 0 : ((x.platform > y.platform) ? 1 : -1));
}

function SortByVersion(x, y) {
  return ((x.version == y.version) ? 0 : ((x.version > y.version) ? 1 : -1));
}

var tbody;
window.onload=function() {
    tbody=document.getElementById("tb1");
    writeTb();
    document.getElementById("browser").onclick=function() {
        arr.sort(SortByBrowser);
        writeTb();
    }
    document.getElementById("engine").onclick=function() {
        arr.sort(SortByEngine);
        writeTb();
    }
    document.getElementById("platform").onclick=function() {
        arr.sort(SortByPlatform);
        writeTb();
    }
    document.getElementById("version").onclick=function() {
        arr.sort(SortByVersion);
        writeTb();
    }
}

<table>
    <tr>
        <th id="engine">Engine</th>
        <th id="browser">Browser</th>
        <th id="platform">Platform</th>
        <th id="version">Version</th>
    </tr>
    <tbody id="tb1"></tbody>
</table>