簡體   English   中英

使用普通JavaScript或Lodash進行JSON數組操作

[英]JSON Array Manipulation using plain JavaScript or Lodash

我有一個類似於以下結構的JSON數組。

[{
"variable_name": "VAR1_XYZ",
"variable_values": [
            {
                "DomainName": "Env1",
                "Value": "ABC Process 1",
                 (some more key-value pairs)
            },
            {
                "DomainName": "Env2",
                "Value": "DEF Process 1",
                 (some more key-value pairs)
            }],
 },{
"variable_name": "VAR2_UVW",
"variable_values": [
            {
                "DomainName": "Env1",
                "Value": "ABC Process 2",
                 (some more key-value pairs)
            },
            {
                "DomainName": "Env2",
                "Value": "DEF Process 2",
                 (some more key-value pairs)
            }],
 }];

我在表結構中顯示此數據,其中“ ng-grid”中多個“ DomainName ”(作為列)的“ variable_name ”(作為行/單元格)值。

我也有一個要求,即用戶在選擇“域名”之一時,必須將所選域中“ variable_name”的值與其他域中的值進行比較,具體取決於是否存在是否匹配,根據是否匹配,“ ng-grid”表單元格需要顏色編碼為“綠色”或“紅色”。

我一直在研究普通的javascript / json對象操作和下划線/ lodash,以了解哪種方法是將JSON對象與以下結構進行比較的最有效方法,但我無法得出有關如何實現它的任何結論。 我也是lodash / underscore庫的新手,如果我過度設計或選擇正確的路徑來解決此問題,可能是造成這種混亂的原因。

我的最終目標是創建一個通用函數,該函數采用選定的域名和以下數組,以提供一個輸出數組,該數組具有每個“ variable_name” /“ DomainName”可用的真/假布爾值列表,我可以使用這些顏色為網格。

因此,例如,如果用戶選擇DomainName作為“ Env1”,我希望獲得“ Env1”下的所有“ variable_name”,並比較其他域中各個“ variable_name”的值並創建一個類似的結果對象至

{Env1 : true, Env2: false, Env3 : true}

我可以用來為ng-grid着色。 如果可以使用lodash /下划線完成操作,請問應該采取什么方法? 而不是普通的javascript?

根據所支持的瀏覽器,可以使用香草ES5進行以下操作:

var arr = [{
    "DomainName": "Env1",
    "Value": "ABC Process 1"
}, {
    "DomainName": "Env2",
    "Value": "DEF Process 1"
},
{
    "DomainName": "Env3",
    "Value": "DEF Process 1"
}];

function constructDomainObject(collection, selectedDomains) {
    return collection.reduce(function (memo, domain) {
        var domainName = domain["DomainName"];
        var selected = selectedDomains.some(function (domain) { 
            return domain === domainName 
        });
        memo[domainName] = selected;
        return memo;
    }, {});
}

var data = constructDomainObject(arr, ['Env1', 'Env3']); 
// data = {Env1 : true, Env2: false, Env3 : true}

如果您支持舊版瀏覽器,則可以使用polyfill reducesome或使用類似lodash / underscore方法。

小提琴

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM