CODEWITHSUNDEEP
node.jsmongodbvue.jsvuetify.js
HzK
HzK

Reputation: 47

insert retrieved data from MongoDB to an array in vue script line array

By REST API, I ran a query and got a result(retrieved data) from MongoDB.

and on .vue file, I want to insert those data to an array in

I can print retrieved data from MongoDB in 'async created()' method on console but have no idea how to put it in chartData array...

retrieved data is following this form

{
"_id" : {
    "year" : "2020",
    "month" : "11",
    "day" : "17",
    "failure_count" : 0.0,
    "success_count" : 1.0
}
}

want to put those data like this

data:()=>({
   chartData:[
       ["Date", "Success_count", "Failure_count"],
       [year+month+day, 3, 5]
       ....
   ]
})

following is my code

<script>
// @ is an alias to /src
import PostService from "../PostService";
export default {
name: "PostComponent",

data: () => ({
chartData: [
  ["Date", "Success_count", "Failure_count"],
  ["2014-xx-xx", 1000, 400],
  ["2015-xx-xx", 1170, 460],
  ["2016-xx-xx", 660, 400],
  ["2017-xx-xx", 1030, 540],
  ["2018-xx-xx", 1025, 530],
  ["2019-xx-xx", 1040, 560],
  ["2020-xx-xx", 1040, 560]
],
chartOptions: {
  chart: {
    title: "",
    subtitle: ""
  }
}
}),
async created() {
try {
  this.posts = await PostService.get_dashboard_Posts();
  console.log('this posts : ' , this.posts  )
} catch (err) {
  this.error = err.message;
}
},
components: {},
computed: {
  theme() {
  return this.$vuetify.theme.dark ? "dark" : "light";
}
},
methods:{
openLink(link){
  window.open(link, '_blank');
}
}
};
</script>

any help or tip? :S

Upvotes: 0

Views: 85

Answers (1)

kissu
kissu

Reputation: 46769

It can be done pretty much anywhere but I guess that doing it below your REST call is a good idea.

Btw, prefer this form for your data

data() {
  return {
    ...
  }
}

PS: be careful with some vue caveats too, if you plan to play with arrays but want them reactive.

EDIT: so, let's say that we put your new line into a newLine variable

const newLine = {
  "_id" : {
      "year" : "2020",
      "month" : "11",
      "day" : "17",
      "failure_count" : 0.0,
      "success_count" : 1.0
  }
}

This kind of code should help achieve what you're asking, it appends a new array (and formats as asked) to your chartData array.

this.chartData = [...this.chartData, [`${newLine._id.year}-${newLine._id.month}-${newLine._id.day}`, newLine._id.success_count, newLine._id.failure_count]]

Upvotes: 1

Related Questions