'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