JSON物件與JSON字串的相互轉換

//JSON物件 屬性名必須使用雙引號包起來
var obj={"a":1,"b":2};
var ary=[{"a":1,"b":2},{"a":10,"b":20},{"a":100,"b":200}];

//JSON字串:將JSON物件使用''包起來
var str1='{"a":1,"b":2}';
var str2='[{"a":1,"b":2},{"a":10,"b":20},{"a":100,"b":200}]';

//將JSON物件變成JSON字串
//JSON.stringify(JSON物件)
console.log(JSON.stringify(obj));
console.log(JSON.stringify(ary));

//將JSON字串變成JSON物件
//JSON.parse(JSON字串)

console.log(JSON.parse(str1));
console.log(JSON.parse(str2));
 

Ajax獲取資料四部曲:

//1.使用建構函式建立一個AJAX物件
var xhr=new XMLHttpRequest();
//2.開啟一個URL地址並請求資料
//open("請求方式","資料的路徑",是否非同步)
xhr.open("GET","json/data.json",false);
//3.監聽請求過程(狀態的變化)事件
xhr.onreadystatechange=function () {
    if(xhr.status==200&&xhr.readyState==4){
        //獲取的資料就是xhr.responseText,是一個JSON字串
        data=JSON.parse(xhr.responseText);
    }
};
//4.傳送資料
xhr.send(null);
 

將Ajax的資料渲染到頁面中：

//1）：先準備一個空的ES6模板
var str=``;
//2）：forEach迴圈資料
data.forEach((item)=>{
    str+=`<h1>${item.name}</h1>`
});
//3）：將迴圈的結果賦值給元素
box.innerHTML=str;

電商網站中商品升序降序的實現原理：（以價格為例）

json的資料相當於類陣列，在Ajax獲取到資料之後，利用sort進行排序（實際就是價格相減），這樣只能實現簡單的升序功能，無法降序，要想升序降序都可以進行，我們可以給元素一個flag標記當前的值，當從升序轉為降序的時候，flag*-1 即可以實現升序降序功能：具體程式碼如下：

for(let i=0;i<alist.length;i++){
    alist[i].flag = 1;
    alist[i].onclick=function(){
        this.flag *= -1;
        if(i==0){
            // alert(0)
            data.sort( (a,b) => {
                return (new Date(a.time)-new Date(b.time))*this.flag;
            });
            bindHTML(data);
        }else if(i==1){
            // alert(0)
            data.sort( (a,b) => {
                return (a.price-b.price)*this.flag;
            });
            bindHTML(data);
        }else if(i==2){
            // alert(0)
            data.sort( (a,b) => {
                return (a.hot-b.hot)*this.flag;
            });
            bindHTML(data);
        }
    }
}