I am trying to build a simple react app which lists my philips hue bulb name and state(on or off). I have API call which results in the following json. Not sure how to pull bulb name and state.on status.
Here is my json result which gets the list of bulbs connected to my hue bridge. I get this result when i fetch via a the philips hue API.
{
"1": {
"state": {
"on": false,
"bri": 254,
"hue": 50116,
"sat": 248,
"effect": "none",
"xy": [
0.2444,
0.0969
],
"ct": 500,
"alert": "select",
"colormode": "xy",
"mode": "homeautomation",
"reachable": true
},
"swupdate": {
"state": "noupdates",
"lastinstall": "2021-08-19T18:10:44"
},
"type": "Extended color light",
"name": "TV 2",
"modelid": "LCT016",
"manufacturername": "Signify Netherlands B.V.",
"productname": "Hue color lamp",
"capabilities": {
"certified": true,
"control": {
"mindimlevel": 1000,
"maxlumen": 800,
"colorgamuttype": "C",
"colorgamut": [
[
0.6915,
0.3083
],
[
0.1700,
0.7000
],
[
0.1532,
0.0475
]
],
"ct": {
"min": 153,
"max": 500
}
},
"streaming": {
"renderer": true,
"proxy": true
}
},
"config": {
"archetype": "sultanbulb",
"function": "mixed",
"direction": "omnidirectional",
"startup": {
"mode": "safety",
"configured": true
}
},
"uniqueid": "00:17:88:01:03:db:75:df-0b",
"swversion": "1.88.1",
"swconfigid": "47ACF9B2",
"productid": "Philips-LCT016-1-A19ECLv5"
},
"2": {
"state": {
"on": false,
"bri": 254,
"hue": 8417,
"sat": 140,
"effect": "none",
"xy": [
0.4573,
0.4100
],
"ct": 366,
"alert": "select",
"colormode": "ct",
"mode": "homeautomation",
"reachable": true
},
"swupdate": {
"state": "noupdates",
"lastinstall": "2021-08-19T18:10:39"
},
"type": "Extended color light",
"name": "Study",
"modelid": "LCT016",
"manufacturername": "Signify Netherlands B.V.",
"productname": "Hue color lamp",
"capabilities": {
"certified": true,
"control": {
"mindimlevel": 1000,
"maxlumen": 800,
"colorgamuttype": "C",
"colorgamut": [
[
0.6915,
0.3083
],
[
0.1700,
0.7000
],
[
0.1532,
0.0475
]
],
"ct": {
"min": 153,
"max": 500
}
},
"streaming": {
"renderer": true,
"proxy": true
}
},
"config": {
"archetype": "sultanbulb",
"function": "mixed",
"direction": "omnidirectional",
"startup": {
"mode": "safety",
"configured": true
}
},
"uniqueid": "00:17:88:01:03:94:fa:07-0b",
"swversion": "1.88.1",
"swconfigid": "47ACF9B2",
"productid": "Philips-LCT016-1-A19ECLv5"
}
}You can map them into an array using map(). Since map only works on arrays, and your data is an object, you can use Object.values to return an array of the object's values and use map on that, like this:
const data={1:{state:{on:!1,bri:254,hue:50116,sat:248,effect:"none",xy:[.2444,.0969],ct:500,alert:"select",colormode:"xy",mode:"homeautomation",reachable:!0},swupdate:{state:"noupdates",lastinstall:"2021-08-19T18:10:44"},type:"Extended color light",name:"TV 2",modelid:"LCT016",manufacturername:"Signify Netherlands B.V.",productname:"Hue color lamp",capabilities:{certified:!0,control:{mindimlevel:1e3,maxlumen:800,colorgamuttype:"C",colorgamut:[[.6915,.3083],[.17,.7],[.1532,.0475]],ct:{min:153,max:500}},streaming:{renderer:!0,proxy:!0}},config:{archetype:"sultanbulb",function:"mixed",direction:"omnidirectional",startup:{mode:"safety",configured:!0}},uniqueid:"00:17:88:01:03:db:75:df-0b",swversion:"1.88.1",swconfigid:"47ACF9B2",productid:"Philips-LCT016-1-A19ECLv5"},2:{state:{on:!1,bri:254,hue:8417,sat:140,effect:"none",xy:[.4573,.41],ct:366,alert:"select",colormode:"ct",mode:"homeautomation",reachable:!0},swupdate:{state:"noupdates",lastinstall:"2021-08-19T18:10:39"},type:"Extended color light",name:"Study",modelid:"LCT016",manufacturername:"Signify Netherlands B.V.",productname:"Hue color lamp",capabilities:{certified:!0,control:{mindimlevel:1e3,maxlumen:800,colorgamuttype:"C",colorgamut:[[.6915,.3083],[.17,.7],[.1532,.0475]],ct:{min:153,max:500}},streaming:{renderer:!0,proxy:!0}},config:{archetype:"sultanbulb",function:"mixed",direction:"omnidirectional",startup:{mode:"safety",configured:!0}},uniqueid:"00:17:88:01:03:94:fa:07-0b",swversion:"1.88.1",swconfigid:"47ACF9B2",productid:"Philips-LCT016-1-A19ECLv5"}};
let bulbs = Object.values(data).map(
m=>{return {name: m.name, state: m.state.on}}
);
console.log(bulbs);