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