'Problems de-structuring complex data from json in reactjs
I have hard time to get data from the dataset I get from IoT, though Mqtt and pubSub, in reactjs. Se below:
my code:
const{isAvailable,timestamp,...metrics} = Data;
console.log(isAvailable);
console.log(timestamp);
console.log(metrics);
Output:
{state: 'API State: New API data received', metrics: Array(134), metrics0: Array(134), Symbol(topic): 'my-topic'}
metrics: (134) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
metrics0: (134) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
state: "API State: New API data received" Symbol(topic): "my-topic" [[Prototype]]: Object
So there are two arrays, metrics and metrics0, I can get them out of the structure this way:
let m1 = metrics.metrics;
let m0 = metrics.metrics0;
console.log(m0);
Output:
ELXXX
PubSubFunctional.js:63 2022-02-18 16:55:39.643456
PubSubFunctional.js:68
(134) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
[0 … 99]
0: {name: 'ESM_DATA.ESM_INFOS[1].TICK_COUNT', value: 0, type: 'DINT'}
1: {name: 'UT59_DO_RDOL', value: true, type: 'BOOL'}
2: {name: 'UT51_DO_BF', value: true, type: 'BOOL'}
3: {name: 'UT129_DNL', value: false, type: 'BOOL'}
4: {name: 'Din_01_MOS', value: false, type: 'BOOL'}
5: {name: 'Din_02_MDS', value: false, type: 'BOOL'}
6: {name: 'HMI_HB2', value: false, type: 'BOOL'}
7: {name: 'HMI_HB1', value: false, type: 'BOOL'}
8: {name: 'HMI_CB2', value: false, type: 'BOOL'}
9: {name: 'HMI_CB1', value: false, type: 'BOOL'}
10: {name: 'Din_03_MOD', value: false, type: 'BOOL'}
11: {name: 'Din_04_CC1', value: false, type: 'BOOL'}
12: {name: 'Din_05_CC2', value: false, type: 'BOOL'}
.........
130: {name: 'UT58_DO_DOL', value: true, type: 'BOOL'}
131: {name: 'ALT_FIRE_FLR', value: 0, type: 'BYTE'}
132: {name: 'V1790_1S_E', value: false, type: 'BOOL'}
133: {name: 'V1791_2S_E', value: false, type: 'BOOL'}
length: 134
[[Prototype]]: Array(0)
From now on, everything I tried to get these data failed. Destructuring , like this: const {name, value, type} = m0; give me an error of : cannot destructure property 'name' of m0 as it is undefined. Also undefined is m0.lenght So I don't understand what type m0 is. It looks like an array of objects with 134 items, but I cannot loop over it, nor get anything.
The array was originally generated by a python code an I could manage the array like in the following:
print(data2['metrics'][j]['name'], data2['metrics'][j]['value']) looping over j
but once transferred over with pubsub (and JSON.stringify), it becomes impossible to be accessed (at least I can't get it).
Has anyone any idea how to solve this problem ? Thank You
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
