javascript - Display sorted json data onclick -


how can sort json data onclick , how can display in page?

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",    }];    (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);

here ul version

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 = [];      (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>

here table version. 

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 = [];    (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>


Comments

Post a Comment

Popular posts from this blog

android - Pass an Serializable object in AIDL -

i have defined aidl file interface imyfeature { void dotask(class clazz); } but need pass class object process. possible in android? if so, how? i tried: interface imyfeature { serializable class; void dotask(class clazz); } but doesn’t work. aidl in android supports custom class implement parcelable interface. in case want send class object not possible. can send class canonical name , retrieve in service. for example have aidl file interface imyfeature { void dotask(string classname); } then call : binder.dotask(myclass.class.getcanonicalname()); and in service binder stub implementation : private final imyfeature mbinder = new imyfeature.stub() { public void dotask(string classname) { try { class<?> clazz = class.forname(classname); constructor<?> ctor = clazz.getconstructor((class[]) null); object object = ctor.newinstance(); ...
Read more

How to provide Authorization & Authentication using Asp.net, C#? -

Image
i have asp.net application in c#. i have provide page authorization specific user/usergroup. i have created 2 tables in database: 1) pagename 2)permissions[insert, update, view, delete] but i'm unable match tables , permissions assigning... can 1 please me, how created tables in database , how coding. please me. you can below explanation. configure access specific file , folder, set forms-based authentication. request page in application redirected logon.aspx automatically. in web.config file, type or paste following code. this code grants users access default1.aspx page , subdir1 folder . <configuration> <system.web> <authentication mode="forms" > <forms loginurl="login.aspx" name=".aspnetauth" protection="none" path="/" timeout="20" > </forms> </authentication> <!-- section denies access files in...
Read more

How to use Authorization & Authentication in Asp.net, C#? -

i using roll management , trying give page , folder access according user or user group, using server created ad group user authentication. i have default1.aspx page default , subdir1 folder give different access separate user group i using below logic in web.config. <location path="subdir1"> <system.web> <authorization> <allow users ="?" /> </authorization> </system.web> </location> i facing problem provide same access 2 or more directory same user should have provide allow user code twice both folder? i can use logic repeating value folder want access providing in 1 logic. i have got answer configure folder/page access, have make different access shown below.. configure access specific file , folder, set forms-based authentication. request page in application redirected logon.aspx automatically. in web.config file, done following code. this code grants user...
Read more