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?
children? If not, you may want to look into finding elements recursively.document.styles, either usingfor...inorObject.keys(), then loop through all the nestedchildrenarrays.