javascript - 尝试将嵌套的 JSON 数据提取到 javascript/尝试消除 JSON 中的键但保留数据

Question

所以我需要根据 JSON 数据制作一个如下所示的图表

{

    "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
            }
        }
    ]
}

问题是我不知道如何从传感器获取数据而不进行硬编码，例如

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

            }

有谁知道如何做到这一点

我也尝试过这个:

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

           }

但这会将所有内容提取到同一个数组中，并且不会按传感器分隔数据

注意:我正在使用 Vue3 和 apexcharts

这是整个代码

<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>

编辑!解决了 this.test=Object.values(this.test)

感谢所有提供帮助的人

Answer 1

您可以使用 reduce 轻松对传感器数据进行分组如下所示:

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)