如何从嵌套JSON的variant值获取对应父级名称？

通过API获取了包含variants的嵌套JSON数据，需要根据指定的variant值获取其对应的父级名称。尝试使用filter、indexOf及嵌套forEach循环等方法后，仍未得到正确结果。

原JSON结构 #

{
    "active": true,
    "main": [{
        "name": "groupOne",
        "heights": [{
                "name": "sm",
                "active": true,
                "addSelectedProduct": false,
                "colors": [{
                            "name": "gold",
                            "triggers": {
                                "offerIds": ["11111"], "variants": ["11112"]
                            }
                        },
                        {
                            "name": "blue",
                            "triggers": {
                                "offerIds": ["11113"], "variants": ["11114"]
                            }
                        },
                        {
                            "name": "white",
                            "triggers": {
                                "offerIds": ["11115"], "variants": ["11116"]
                            }
                        },
                        {
                            "name": "black",
                            "triggers": {
                                "offerIds": ["11117"], "variants": ["11118"]
                            }
                        }
                ]
                        },
            {
                "name": "md",
                "active": true,
                "addSelectedProduct": false,
                "colors": [{
                            "name": "gold",
                            "triggers": {
                                "offerIds": ["11119"], "variants": ["11121"]
                            }
                        },
                        {
                            "name": "blue",
                            "triggers": {
                                "offerIds": ["11122"], "variants": ["11123"]
                            }
                        },
                        {
                            "name": "white",
                            "triggers": {
                                "offerIds": ["11124"], "variants": ["11125"]
                            }
                        },
                        {
                            "name": "black",
                            "triggers": {
                                "offerIds": ["11126"], "variants": ["11127"]
                            }
                        }
                ]
            },
            {
                "name": "lg",
                "active": true,
                "addSelectedProduct": false,
                "colors": [{
                            "name": "gold",
                            "triggers": {
                                "offerIds": ["11128"], "variants": ["11129"]
                            }
                        },
                        {
                            "name": "blue",
                            "triggers": {
                                "offerIds": ["11131"], "variants": ["11132"]
                            }
                        },
                        {
                            "name": "white",
                            "triggers": {
                                "offerIds": ["11133"], "variants": ["11134"]
                            }
                        },
                        {
                            "name": "black",
                            "triggers": {
                                "offerIds": ["11135"], "variants": ["11136"]
                            }
                        }
                ]
            }]

        },
        {
        "name": "groupTwo",
        "heights": [{
            "name": "sm",
            "active": true,
            "addSelectedProduct": false,
            "colors": [{
                        "name": "gold",
                        "triggers": {
                            "offerIds": ["11137"], "variants": ["11138"]
                        }
                },
                {
                        "name": "blue",
                        "triggers": {
                            "offerIds": ["11139"], "variants": ["11141"]
                        }
                },
                {
                        "name": "white",
                        "triggers": {
                            "offerIds": ["11142"], "variants": ["11143"]
                        }
                },
                {
                        "name": "black",
                        "triggers": {
                            "offerIds": ["11144"], "variants": ["11145"]
                        }
                }
            ]
        },
        {
            "name": "md",
            "active": true,
            "addSelectedProduct": false,
            "colors": [{
                        "name": "gold",
                        "triggers": {
                            "offerIds": ["11146"], "variants": ["11147"]
                        }
                },
                {
                        "name": "blue",
                        "triggers": {
                            "offerIds": ["11148"], "variants": ["11149"]
                        }
                },
                {
                        "name": "white",
                        "triggers": {
                            "offerIds": ["11151"], "variants": ["11152"]
                        }
                },
                {
                        "name": "black",
                        "triggers": {
                            "offerIds": ["11153"], "variants": ["11154"]
                        }
                }
            ]
            
        },
        {
            "name": "lg",
            "active": true,
            "addSelectedProduct": false,
            "colors": [{
                "name": "gold",
                "triggers": {
                        "offerIds": ["11155"], "variants": ["11156"]
                }
            },
            {
                "name": "blue",
                "triggers": {
                        "offerIds": ["11157"], "variants": ["11158"]
                }
            },
            {
                "name": "white",
                "triggers": {
                        "offerIds": ["11159"], "variants": ["11159"]
                }
            },
            {
                "name": "black",
                "triggers": {
                        "offerIds": ["11161"], "variants": ["11162"]
                }
            }
        ]
        }]


    }]

}

原JavaScript代码 #

var elMain, elHeights, elColor, elOffer;

function findProduct(item) {
    app.main.forEach(function(el) {
        el.heights.forEach(function(itemHeights) {
            itemHeights.colors.forEach(function(itemColor) {
                if(itemColor.triggers.variants.indexOf(item.toString())) {
                    elOffer = itemColor.triggers.offerIds
                    elColor = itemColor;
                    elHeights = itemHeights;
                    elMain = el;
                } else{
                }
            })
        })
    })
}

findProduct(11123)

console.log(elMain);
console.log(elHeights);
console.log(elColor);
console.log(elOffer);

问题分析 #

1. indexOf判断逻辑错误：indexOf()找到匹配元素时返回其索引（≥0），未找到返回-1。原代码中直接用if(itemColor.triggers.variants.indexOf(item.toString()))，当匹配项索引为0时，会被JavaScript判定为false，导致无法正确匹配。
2. 未终止循环：找到目标variant后，循环仍会继续执行，后续遍历的元素可能会覆盖已找到的正确结果。
3. 依赖全局变量：使用全局变量存储结果，不符合函数式编程规范，容易引发变量污染问题。

解决方案 #

基础修复版本（保留原逻辑，修正核心问题）

// 改为函数返回结果，避免全局变量污染
function findProduct(targetVariant) {
    const targetStr = targetVariant.toString();
    // 遍历外层分组
    for (const group of app.main) {
        // 遍历高度层级
        for (const height of group.heights) {
            // 遍历颜色层级
            for (const color of height.colors) {
                // 使用includes直接判断是否包含目标值，逻辑更清晰
                if (color.triggers.variants.includes(targetStr)) {
                    // 找到后立即返回结果，终止所有循环
                    return {
                        groupName: group.name,
                        heightName: height.name,
                        colorName: color.name,
                        offerIds: color.triggers.offerIds,
                        fullGroup: group,
                        fullHeight: height,
                        fullColor: color
                    };
                }
            }
        }
    }
    // 未找到匹配项时返回null
    return null;
}

// 调用示例
const result = findProduct(11123);
console.log(result.groupName); // 输出 groupOne
console.log(result.heightName); // 输出 md
console.log(result.colorName); // 输出 blue
console.log(result.offerIds); // 输出 ["11122"]

优化版本（使用数组方法，代码更简洁）

function findProduct(targetVariant) {
    const targetStr = targetVariant.toString();
    // 找到匹配的分组
    const group = app.main.find(g => 
        g.heights.some(h => 
            h.colors.some(c => c.triggers.variants.includes(targetStr))
        )
    );
    if (!group) return null;
    // 找到匹配的高度
    const height = group.heights.find(h => 
        h.colors.some(c => c.triggers.variants.includes(targetStr))
    );
    if (!height) return null;
    // 找到匹配的颜色
    const color = height.colors.find(c => 
        c.triggers.variants.includes(targetStr)
    );
    return {
        groupName: group.name,
        heightName: height.name,
        colorName: color.name,
        offerIds: color.triggers.offerIds,
        fullGroup: group,
        fullHeight: height,
        fullColor: color
    };
}

// 调用示例
const result = findProduct(11123);
console.log(result);

内容的提问来源于stack exchange，提问作者kront