Trying to extract nested JSON data to javascript/trying to eliminate keys in JSON but keep the data

Viewed 78

So I need to make a chart from my JSON data that looks like this

{

    "batch": [{

            "timestamp": 738127638,
            "data": {
                "senzor1": 525,
                "senzor2": 625,
                "senzor3": 425,
                "senzor4": 325
            }
        },
        {

            "timestamp": 738127640,
            "data": {
                "senzor1": 528,
                "senzor2": 628,
                "senzor3": 428,
                "senzor4": 328
            }
        },
        {

            "timestamp": 738127658,
            "data": {
                "senzor1": 535,
                "senzor2": 635,
                "senzor3": 435,
                "senzor4": 335
            }
        }
    ]
}

Thing is that I don't know how to get data from the senzors withouth hardcoding something like

  for (let i = 0; i < this.batch.length; i++) {
              this.ts.push(this.batch[i].data.senzor1)

            }

Does anyone have an idea on how to do this

I have also tried this:

for (let i = 0; i < this.batch.length; i++) {
             this.ts.push(...Object.values(this.batch[i].data))

           }

but this extracts everything into the same array and doesn't seperate data by senzors

NOTE: I'm working with Vue3 and apexcharts

and this is the entire code

<template>
  <div id="wrapper">

   <p>{{batch}}</p>
   <p>{{s1}}</p>
   
   
  <div id="chart-line">
   <apexchart
      width="500"
      type="line"
      :options="chartOptions"
      :series="series"
      ></apexchart>
  </div>
      <div id="chart-line">
   <apexchart
      width="500"
      type="line"
      :options="chartOptions"
      :series="seriesLine2"
      ></apexchart>
  </div>
     
     
  </div>
</template>
<script>

import VueApexCharts from "vue3-apexcharts";
export default {

  components: {
    
    apexchart: VueApexCharts,
    
  },
    data: function() {
    return {
      batch:[],
      s1:[],
      s2:[],
      s3:[],
      s4:[],
      chartOptions: {
        chart: {
          id: "vuechart-example",
        },
        xaxis: {
          categories: [],
        },
      },
      series: [
        {
          name: "series-1",
          data: [],
        },  
      ],
      seriesLine2:[{
        
          name: "series-2",
          data: [],
        
          
      }]
};
    },
      methods:{ 
 
        async fetchBatch(){ 
            const res=await fetch('http://localhost:5000/batch')

            const data= await res.json()
            return data
        },

    
    },
 


    async created(){ 
    
            this.batch=await this.fetchBatch()
            console.log(this.batch)

               for (let i = 0; i < this.batch.length; i++) {
                this.s1.push(this.batch[i].data.senzor1)
                this.s2.push(this.batch[i].data.senzor2)
                this.s3.push(this.batch[i].data.senzor3)
                this.s4.push(this.batch[i].data.senzor4)
              }

            this.series=[{name: "series-1",data: this.s1}]
            this.seriesLine2=[{name: "series-2",data: this.s2}]
            
      

        }

    

    
}







</script>

EDIT! Solved with this.test=Object.values(this.test)

thanks for everyone who helped

2 Answers

You could easily group sensor data using reduce like below:

let batch = [{

    "timestamp": 738127638,
    "data": {
      "senzor1": 525,
      "senzor2": 625,
      "senzor3": 425,
      "senzor4": 325
    }
  },
  {

    "timestamp": 738127640,
    "data": {
      "senzor1": 528,
      "senzor2": 628,
      "senzor3": 428,
      "senzor4": 328
    }
  },
  {

    "timestamp": 738127658,
    "data": {
      "senzor1": 535,
      "senzor2": 635,
      "senzor3": 435,
      "senzor4": 335
    }
  }
];

let grouped = batch.reduce((sensors, ts) => {
  let {
    data
  } = ts;
  for (let sen in data) {
    sensors[sen] = [...(sensors[sen] || []), {time: ts.timestamp, log:data[sen]}]
  };
  return sensors;
}, {});
console.log(grouped)

You could just use object.keys to pull the individual senzor names from that data object

let test = {

    "batch": [{

            "timestamp": 738127638,
            "data": {
                "senzor1": 525,
                "senzor2": 625,
                "senzor3": 425,
                "senzor4": 325
            }
        },
        {

            "timestamp": 738127640,
            "data": {
                "senzor1": 528,
                "senzor2": 628,
                "senzor3": 428,
                "senzor4": 328
            }
        },
        {

            "timestamp": 738127658,
            "data": {
                "senzor1": 535,
                "senzor2": 635,
                "senzor3": 435,
                "senzor4": 335
            }
        }
    ]
}

let res = {}
test.batch.forEach(e=>{
  Object.keys(e.data).forEach(senzor=>{
    res[senzor]=res[senzor]||[]
    res[senzor].push({ts:e.timestamp, val:e.data[senzor]})
    })
})

console.log(res)

Related