[jQuery][進階]JSON陣列字串新增組成

Designed by Freepik
這篇文章有點進階,上次介紹的是JSON物件字串,一階JSON陣列字串,
但如果是一階陣列以上的話,該怎麼處理?
如果這時候,您還可以用組合的方式,就真的腦袋很清楚了。哈~
圖片來源Designed by Freepik
我們還是以上次的字串結構為範例,這次多了上一層。
function CompanyList(CompanyName, CompanyID, billingAddList) {
    this.CompanyName = CompanyName;
    this.CompanyID = CompanyID;
    this.billingAddList= billingAddList;
}

function billingAddList(billId, FirstName, LastName, address1, address2) {
    this.FirstName = FirstName;
    this.LastName = LastName;
    this.address1 = address1;
    this.address2 = address2;
}

首先我們先儲存Master資料表, 因為CompanyList裡,billingAddList節點還沒有資料, 所以寫入的程式小小小修改如下。

$('#saveCompany01').click(function () {
    var tmpObj = new CompanyList(
                 $('#companyNA').find(":selected").text(),
                 $('#CompanyID').val(),
                 null);
 
    var jsonArr = $.makeArray($.parseJSON(localStorage.getItem("demoData")));
    if (typeof (jsonArr) != 'undefined' && jsonArr.length != 0)
        console.log("befor:", jsonArr);
    else
        jsonArr = jsonArr.filter(function (v) { return v !== null });
 
    jsonArr.push(tmpObj);
    console.log("after:", jsonArr);
    localStorage.setItem('demoNestedData', JSON.stringify(jsonArr));
});


接下去我們就要利用JSON的節點特性,
找到相對應的表頭資料,將billingAddList放進去。
中間我們都以Array來處理資料,
直到最後才將Array以JSON.stringify方法轉為JSON字串並儲存。

$('#saveCompany02').click(function () {
    var billingListObj = new billingAddList(new Date(),
    $('#shippingFna').val(),
    $('#shippingLna').val(),
    $('#shippingAdd1').val(),
    $('#shippingAdd2').val());
    var jsonArr = $.makeArray($.parseJSON(localStorage.getItem("demoNestedData")));
    if (typeof (jsonArr) != 'undefined' && jsonArr.length != 0) {
        $.each(jsonArr, function (i, item) {
            //找到相同公司名稱的節點
            if (item.CompanyName == $('#companyNA').find(":selected").text()) {
                //將billingAddList資料取出
                var tmpObj = $.makeArray(item.billingAddList);
                if (tmpObj.length != 0)
                    tmpObj = tmpObj.filter(function (v) { return v !== null });
                tmpObj.push(billingListObj);
                item.billingAddList = tmpObj;
            }
        });
        localStorage.setItem('demoNestedData', JSON.stringify(jsonArr));
    }
});

沒有留言:

張貼留言

技術提供:Blogger.