質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1149閲覧

javascript内でfirebaseの配列を展開したい

you88

総合スコア147

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/12/19 00:19

編集2018/12/19 23:06

下記のようにchart.jsでグラフを書きたいのですがfirebaseのuser/notes/contentsのみを配列で取得してdataに代入するコードがうまく書けなくて困っています。。。。

firebaseから下記コードで数字を取得し、this.notesに配列を入れています。

created: function() { firebase .database() .ref('notes/' + this.user.uid) .once('value') .then(result => { if (result.val()) { this.notes = result.val(); } })

この配列を

var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], datasets: [{ label: 'apples', data: /*ここにnotesのcontentプロパティを展開したい*/, backgroundColor: "rgba(153,255,51,0.4)" },

chart.jsのdataにcontentsプロパティのみを入れたいと考えています。その際の良いコードが思いつかず困っています。

全体

<template> 上記省略 <canvas id="myChart"></canvas> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], datasets: [{ label: 'apples', data: /*ここにnotesのcontentプロパティを展開したい*/, backgroundColor: "rgba(153,255,51,0.4)" }, { label: 'oranges', data: [2, 29, 5, 5, 2, 3, 10], backgroundColor: "rgba(255,153,0,0.4)" }] } }); </script> </div> </template> <script> import firebase from '@/plugins/firebase' import { mapState } from 'vuex' export default { name: 'mypage', props: ['user'], data (context) { // コンポーネントをロードする前に毎回呼び出されます return { note_content: 'hello', notes:[]} }, // DOMが作成されたときに値を代入する created: function() { firebase .database() .ref('notes/' + this.user.uid) .once('value') .then(result => { if (result.val()) { this.notes = result.val(); } }) }, computed: { ...mapState({ mypageUrl: (state) => `/user/${state.uid}` }) }, methods: { saveContent: function(value) { // 新しいテキストのためのキーを取得 var newNoteKey = firebase.database().ref().child('notes').push().key; var today = Date.now(); firebase .database() .ref('notes/' + this.user.uid + '/' + newNoteKey) .set({content:value,date:today}); } } } </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/12/19 00:48

現在のコードで起きている問題や課題、やろうとしていることに対してどこまでできていて何ができていないかを整理して記載してください。この内容だけだとどのような回答を求めているのかわかりませんので
you88

2018/12/19 23:07

すみませんでした。追記させていただきました。
guest

回答1

0

ベストアンサー

async/await使ってあげましょう。

vue

1 async created() { 2 await firebase 3 .database() 4 .ref(`notes/${this.user.uid}`) 5 .once("value", snapshot => { 6 this.notes = snapshot.val() || null 7 }) 8 },

投稿2018/12/19 05:54

編集2018/12/19 05:56
shou6

総合スコア305

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問