Manipulating Data in Vue for Chart Options

Question

I am hitting a rest api giving me a dataset on a piece of equipment. I need to get the first column of datas as an array and I seem to not get it right. I have tried computed and methods in vue but it always returns []. Does anyone know what I may be doing wrong? {{datas}} prints out my JSON with no issues but when i add {{ getDate }} it returns can't find date of undefined.

Thanks

<template>
  <v-app>
    <!-- <v-data-table :headers="headers" :items="datas" class="elevation-1">
        <template slot="items" scope="props">
          <td class="text-xs-right">{{props.item.date}}</td>
          <td class="text-xs-right">{{props.item.iron}}</td>
          <td class="text-xs-right">{{props.item.chromium}}</td>
          <td class="text-xs-right">{{props.item.lead}}</td>
        </template>
    </v-data-table>-->
    <p>{{ datas }}</p>
    <!-- <p v-for="data in datas">{{ data.date }}</p> -->
    {{ getDates }}
    <center>
      <chart :options="chartOptionsBar"></chart>
    </center>
    <chart :options="chartOptionsLine"></chart>
    <p>108J View</p>
  </v-app>
</template>

<script>
import axios from "axios";

export default {
  name: "E108J",
  components: {},
  data() {
    return {
      datas: [],
      chartDates: [],
      chartOptionsLine: {
        xAxis: {
          data: ["q", "Q2", "Q3", "Q4"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            type: "line",
            data: [63, 75, 24, 92]
          }
        ],
        title: {
          text: "Quarterly Sales Results",
          x: "center",
          textStyle: {
            fontSize: 24
          }
        },
        color: ["#127ac2"]
      },
      chartOptionsBar: {
        xAxis: {
          data: ["Q1", "Q2", "Q3", "Q4"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            type: "bar",

            data: [63, 75, 24, 92]
          }
        ],
        title: {
          text: "Quarterly Sales Results",
          x: "center",
          textStyle: {
            fontSize: 36
          }
        }
      }
    };
  },
  mounted() {
    axios
      .get("http://localhost:3000/E108J")
      .then(response => (this.datas = response.data));
  },
  computed: {
    getDates() {
      let chartdates;
      for (let i = 0;i< this.datas.length; i++) {
        chartdates = this.data[i];
      }
      return chartdates;
    }
  }
};
</script>

JSON Data:

[
{
date: "10/18/2018",
iron: "0",
chromium: "0",
lead: "3",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "0",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "1",
barioum: "0",
phosphorous: "3",
zinc: "2",
molybden: "1",
tin1: "0",
vandium: "2",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "214.41",
tan: "0.32",
kfish: "22",
water: "0.0022",
pc0: "455",
pc1: "139",
pc2: "25",
pc3: "11",
pc4: "1",
pc5: "0",
pciso0: "16",
pciso1: "14",
pciso2: "12"
},
{
date: "11/2/2018",
iron: "0",
chromium: "0",
lead: "2",
copper: "0",
tin: "3",
aluminum: "0",
nickel: "1",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "10",
zinc: "0",
molybden: "0",
tin1: "0",
vandium: "0",
w: "0",
potassium: "0",
antimony: "7",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "213.56",
tan: "0.19",
kfish: "29",
water: "0.0029",
pc0: "339",
pc1: "39",
pc2: "21",
pc3: "8",
pc4: "0",
pc5: "0",
pciso0: "16",
pciso1: "12",
pciso2: "12"
},
{
date: "11/29/2018",
iron: "0",
chromium: "0",
lead: "0",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "0",
silver: "0",
silicon: "2",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "1",
zinc: "1",
molybden: "0",
tin1: "0",
vandium: "0",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "217.67",
tan: "0.18",
kfish: "21",
water: "0.0021",
pc0: "921",
pc1: "223",
pc2: "40",
pc3: "18",
pc4: "1",
pc5: "0",
pciso0: "17",
pciso1: "15",
pciso2: "12"
},
{
date: "12/13/2018",
iron: "0",
chromium: "0",
lead: "1",
copper: "0",
tin: "0",
aluminum: "1",
nickel: "0",
silver: "0",
silicon: "0",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "2",
zinc: "0",
molybden: "2",
tin1: "0",
vandium: "0",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "214.46",
tan: "0.26",
kfish: "22",
water: "0.0022",
pc0: "581",
pc1: "101",
pc2: "39",
pc3: "24",
pc4: "7",
pc5: "4",
pciso0: "16",
pciso1: "14",
pciso2: "12"
},
{
date: "1/14/2019",
iron: "0",
chromium: "0",
lead: "0",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "1",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "4",
zinc: "0",
molybden: "0",
tin1: "0",
vandium: "0",
w: "0",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "222.35",
tan: "0.29",
kfish: "13",
water: "0.0013",
pc0: "663",
pc1: "140",
pc2: "13",
pc3: "11",
pc4: "2",
pc5: "0",
pciso0: "17",
pciso1: "14",
pciso2: "11"
}
]

Answer 1

Try this:

<div v-if="datas.length > 0">
<p>{{ datas }}</p>
 {{ getDates }}
</div>

Answer 2

In this lines of code

getDates() {
  let chartdates;
  for (let i = 0;i< this.datas.length; i++) {
    chartdates = this.data[i];
  }
  return chartdates;
}

may be this.data[i] is replace by this.datas[i];

Answer 3

First, to be safe, check that datas exists in your computed property. It is set to an array initially, but if invalid data comes back it could cause an error. So you could check something right inside your computed property like if(this.datas && this.datas.length) , and only if that is true try to fill in chartdates . Otherwise, return an empty array.

Second, based on the JSON you included, the date can be extracted in the for loop using

this.datas[i].date

What you have now would get the whole object inside { .. } instead of just the date. There's also a typo using this.data[i] when it should be this.datas[i] .

Finally, to make chartdates an array you need to set chartdates[i] to each i th value, otherwise only the last value will be stored in chartdates as Steven pointed out.