JSON 使用普通 JavaScript 或 Lodash 的数组操作

Question

我有一个类似于下面结构的 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)
            }],
 }];

我在 table 结构中呈现此数据，其中“variable_name”（作为行/单元格）值跨多个“域名"s (as columns) in an "ng-grid”。

我还要求用户在选择 "DomainName" 之一时，必须将所选域中 "variable_name" 的值与以下值进行比较其他域，根据是否匹配，"ng-grid" table 单元格需要根据是否匹配将颜色编码为 "green" 或 "red"与否..

我一直在查看普通的 javascript / json 对象操作和下划线 / lodash 以了解哪种是比较 JSON 对象与以下结构的最有效方法，我无法就如何实现它得出任何结论。我也是 lodash / underscore 库的新手，如果我过度工程或者我正在采取正确的方法来解决这个问题，可能会导致这种混乱。

我的最终目标是创建一个通用函数，它采用选定的域名和下面的数组来提供一个输出数组，其中包含每个 "variable_name" / [=33 的真/假布尔值列表=] 我可以用来为网格着色。

因此，例如，如果用户将域名选择为 "Env1"，我希望获取 "Env1" 下的所有 "variable_name" 并比较各个 [=来自其他域的 34=]s 并创建类似于

的结果对象

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

我可以用它来为 ng-grid 着色。如果必须使用 lodash / 下划线来完成，您能否建议应该采取什么方法？而不是普通的 javascript?

Answer 1

根据您支持的浏览器，您可以使用 vanilla 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}

如果您支持旧版浏览器，您可以填充 reduce 和 some 或使用类似的 lodash/underscore 方法。

Fiddle

JSON 使用普通 JavaScript 或 Lodash 的数组操作

JSON Array Manipulation using plain JavaScript or Lodash

javascript

arrays

json

lodash