使用 javascript 或 Jquery 过滤 JSON GraphQL 数据

Question

I have some data pulled through the GraphQL API and stringified in JSON. It looks like this

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"
                        }
                    }
                }
            ]
        }
    }
}

}

I also have 2 elements like so:

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

I wish to use javascript (or JQuery) to loop through the JSON data and show the title of every node with a material value of "Silk" in the with the ID of silk and similarly for "cotton".

I understand that I can achieve this with the filter function, but I'm having issues grabbing values of one branch on the basis of the values of a lower branch.

Is it therefore possible to do this and if so how?

Answer 1

I would use map for this since you dont want to return filtered nodes, but instead return the titles of each

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
})