使用 javascript 或 Jquery 过滤 JSON GraphQL 数据答案

【问题标题】：Filter JSON GraphQL data with javascript or Jquery使用 javascript 或 Jquery 过滤 JSON GraphQL 数据
【发布时间】：2021-03-03 09:14:55
【问题描述】：

我通过 GraphQL API 提取了一些数据并在 JSON 中进行了字符串化。看起来是这样的

var data = {
"data": {
    "shop": {
        "products": {
            "edges": [{
                    "node": {
                        "title": "Green Silk T-Shirt",
                        "material": {
                            "value": "Silk"
                        }
                    }
                },
                {
                    "node": {
                        "title": "Red Silk T-Shirt",
                        "material": {
                            "value": "Silk"
                        }
                    }
                },
                {
                    "node": {
                        "title": "Blue Cotton T Shirt",
                        "material": {
                            "value": "Cotton"
                        }
                    }
                },
                {
                    "node": {
                        "title": "Red Cotton T-Shirt",
                        "material": {
                            "value": "Cotton"
                        }
                    }
                },
                {
                    "node": {
                        "title": "Pink Cotton T-Shirt",
                        "material": {
                            "value": "Cotton"
                        }
                    }
                }
            ]
        }
    }
}

}

我也有 2 个这样的元素：

<div id="cotton"></div>
<div id="silk"></div>

我希望使用 javascript（或 JQuery）循环遍历 JSON 数据，并在 ID 为 Silk 和类似的“cotton”中显示材料值为“Silk”的每个节点的标题。

我知道我可以使用过滤器功能来实现这一点，但是我在根据较低分支的值获取一个分支的值时遇到了问题。

因此有可能做到这一点吗？如果可以，怎么做？

【问题讨论】：

标签： javascript jquery json graphql

【解决方案1】：

我会为此使用地图，因为您不想返回过滤后的节点，而是返回每个节点的标题

var nodes = data.data.shop.products.edges;

var silks = nodes.map(node => {
    if node.material.value === 'Silk':
        return node.title
})

var cotton = nodes.map(node => {
    if node.material.value === 'Cotton':
        return node.title
})

【讨论】：

我是 javascript noobie，所以请原谅这可能是一个简单的问题 - 但我在指定过滤条件的行中收到“未捕获的 SyntaxError：意外标识符”错误，在这个案例“丝绸”。