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

Question

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

tony19 · Accepted Answer · 2022-07-16 00:15:15Z

1

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

edited Jul 16, 2022 at 0:15

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jan 6, 2021 at 10:12

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HzK Over a year ago

would you like to explain in more detail please...:S I am new to this field sorry :S @kissu

HzK Over a year ago

with a bit more modification. solved it thanks a lot @kissu

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related