使用纯 JavaScript 或 Lodash 进行 JSON 数组操作

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

我在表格结构中显示这些数据，其中“variable_name”（作为行/单元格）值跨多个“DomainName”（作为列）在一个“ng网格”。

我还有一个要求，即用户在选择“DomainName”之一时，必须将所选域中“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 / underscore 来完成，您能否建议应该采取什么方法？而不是普通的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