使用纯JavaScript或Lodash的JSON数组操作

JSON Array Manipulation using plain JavaScript or Lodash

本文关键字：JSON 数组 操作 Lodash JavaScript      更新时间：2023-12-24

我有一个类似于下面结构的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网格"中的多个"DomainName"（作为列）中具有"variable_name（作为行/单元格）值。

我还有一个要求，用户在选择一个"域名"时，必须将所选域中"variable_name"的值与其他域的值进行比较，并且根据是否匹配，"ng网格"表单元格需要颜色编码为"绿色"或"红色"，具体取决于是否匹配。。

我一直在研究简单的javascript/json对象操作和下划线/lodash，以了解将json对象与以下结构进行比较的最有效方法，但我无法就如何实现它得出任何结论。我也是lodash/underline库的新手，如果我过度设计，或者我正在采取正确的方法来解决这个问题，这可能会导致这种混乱。

我的最终目标是创建一个通用函数，该函数使用所选域名和下面的数组来提供一个输出数组，该数组为我可以用于为网格着色的每个"variable_name"/"DomainName"都有一个true/false布尔值列表。

因此，例如，如果用户选择DomainName作为"Env1"，我希望获得"Env1"下的所有"variable_name"，并比较来自其他域的各个"variablename"的值，并创建类似于的结果对象

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

我可以用来给ng网格着色。如果必须使用lodash/下划线进行操作，您能建议应该采取什么方法吗？而不是简单的javascript？

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

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

Fiddle

相关文章：