0

I am fetching JSON output from figma api. My console.log(response.data); shows this.

{
    "document": {
      "id": "0:0",
      "name": "Document",
      "type": "DOCUMENT",
      "children": [
        {
          "id": "0:1",
          "name": "Page 1",
          "type": "CANVAS",
          "children": [
            {
              "id": "2:15",
              "name": "typography",
              "type": "FRAME",
              "blendMode": "PASS_THROUGH",
              "children": [
                {
                  "id": "2:26",
                  "name": "Body Regular",
                  "type": "TEXT",
                  "blendMode": "PASS_THROUGH",
                  "absoluteBoundingBox": {
                    "x": -2385,
                    "y": -345,
                    "width": 94,
                    "height": 22
                  },
                  "constraints": {
                    "vertical": "TOP",
                    "horizontal": "LEFT"
                  },
                  "fills": [
                    {
                      "blendMode": "NORMAL",
                      "type": "SOLID",
                      "color": {
                        "r": 0,
                        "g": 0,
                        "b": 0,
                        "a": 1
                      }
                    }
                  ],
                  "strokes": [],
                  "strokeWeight": 1,
                  "strokeAlign": "OUTSIDE",
                  "effects": [],
                  "characters": "Body Regular ",
                  "style": {
                    "fontFamily": "Roboto",
                    "fontPostScriptName": null,
                    "fontWeight": 400,
                    "textAutoResize": "WIDTH_AND_HEIGHT",
                    "fontSize": 16,
                    "textAlignHorizontal": "LEFT",
                    "textAlignVertical": "TOP",
                    "letterSpacing": 0,
                    "lineHeightPx": 22,
                    "lineHeightPercent": 117.33332824707031,
                    "lineHeightPercentFontSize": 137.5,
                    "lineHeightUnit": "PIXELS"
                  },
                  "layoutVersion": 3,
                  "characterStyleOverrides": [],
                  "styleOverrideTable": {},
                  "styles": {
                    "text": "2:14"
                  }
                },
                {
                  "id": "2:27",
                  "name": "H1 Header Text",
                  "type": "TEXT",
                  "blendMode": "PASS_THROUGH",
                  "absoluteBoundingBox": {
                    "x": -2385,
                    "y": -293,
                    "width": 248,
                    "height": 42
                  },
                  "constraints": {
                    "vertical": "TOP",
                    "horizontal": "LEFT"
                  },
                  "fills": [
                    {
                      "blendMode": "NORMAL",
                      "type": "SOLID",
                      "color": {
                        "r": 0,
                        "g": 0,
                        "b": 0,
                        "a": 1
                      }
                    }
                  ],
                  "strokes": [],
                  "strokeWeight": 1,
                  "strokeAlign": "OUTSIDE",
                  "exportSettings": [],
                  "effects": [],
                  "characters": "H1 Header Text",
                  "style": {
                    "fontFamily": "Roboto",
                    "fontPostScriptName": null,
                    "fontWeight": 400,
                    "textAutoResize": "WIDTH_AND_HEIGHT",
                    "fontSize": 36,
                    "textAlignHorizontal": "LEFT",
                    "textAlignVertical": "TOP",
                    "letterSpacing": 0,
                    "lineHeightPx": 42,
                    "lineHeightPercent": 99.55555725097656,
                    "lineHeightPercentFontSize": 116.66666412353516,
                    "lineHeightUnit": "PIXELS"
                  },
                  "layoutVersion": 3,
                  "characterStyleOverrides": [],
                  "styleOverrideTable": {},
                  "styles": {
                    "text": "3:28"
                  }
                }
              ],
              "absoluteBoundingBox": {
                "x": -2573,
                "y": -513,
                "width": 1440,
                "height": 1024
              },
              "constraints": {
                "vertical": "TOP",
                "horizontal": "LEFT"
              },
              "clipsContent": true,
              "background": [
                {
                  "blendMode": "NORMAL",
                  "type": "SOLID",
                  "color": {
                    "r": 1,
                    "g": 1,
                    "b": 1,
                    "a": 1
                  }
                }
              ],
              "fills": [
                {
                  "blendMode": "NORMAL",
                  "type": "SOLID",
                  "color": {
                    "r": 1,
                    "g": 1,
                    "b": 1,
                    "a": 1
                  }
                }
              ],
              "strokes": [],
              "strokeWeight": 1,
              "strokeAlign": "INSIDE",
              "backgroundColor": {
                "r": 1,
                "g": 1,
                "b": 1,
                "a": 1
              },
              "effects": []
            }
          ],
          "prototypeStartNodeID": null
        }
      ]
    },
    "styles": {
      "2:14": {
        "key": "ed5768a436a68ca6fd50a80b1c1b9b2cb793fd0e",
        "name": "text-body",
        "styleType": "TEXT",
        "description": ""
      },
      "3:28": {
        "key": "f19915747eaa1951ed2bec209826713937bf94b8",
        "name": "h1",
        "styleType": "TEXT",
        "description": ""
      }
    }
  }

Basically one of the key value inside an object is associated with another object which can be refered by 2nd object key itself. I want to get styles > key > name for each id inside document > children > children > children > id where document > children > children > children > styles > text = styles > key

How do I write this in react js?

Sanjeev Hegde
  • 140
  • 13
  • Will this response always have 3 levels of ```children```? If not, you may want to look into finding elements [recursively](https://stackoverflow.com/questions/53390440/how-to-find-a-object-in-a-nested-array-using-recursion-in-js). – Chris B. Jan 25 '22 at 16:49
  • Yes @ChrisB. This is how Figma api provides data, unfortunately. – Sanjeev Hegde Jan 25 '22 at 17:17
  • What I meant was will the response always be identical? If you write a function to parse this specific object, but the response is more or less nested in the future it will no longer work. Unfortunately you're going to have to execute a lot of iterations. I'd start by looping over the keys in ```document.styles```, either using ```for...in``` or ```Object.keys()```, then loop through all the nested ```children``` arrays. – Chris B. Jan 25 '22 at 17:56

0 Answers0