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

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

新規登録して質問してみよう
ただいま回答率
85.54%
JavaScript

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

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

1646閲覧

ncmbのデータストからobject形式で取得する方法

todayyy

総合スコア31

JavaScript

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

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2020/05/12 00:47

実現させたい事

ncmbのデータストアからobject形式でデータを取得したいです。
(getcurrenUserに似たような形でデータストアにある1つのobjectを取得したい)

getCurrentUser() → {userName: "sample", password: "a", objectId: "U0FX52HM3y4Xax71", mailAddress: "test@gmail.com", mailAddressConfirm: true…}

試した事

HTML

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 15 <script> 16 17 if (ons.platform.isIPhoneX()) { 18 document.documentElement.setAttribute('onsflag-iphonex-portrait', ''); 19 document.documentElement.setAttribute('onsflag-iphonex-landscape', ''); 20 } 21 22 const appKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; 23 const clientKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; 24 25 var ncmb = new NCMB(appKey, clientKey); 26 27 var testclass = ncmb.DataStore('test'); 28 var list = ""; 29 testclass 30 .fetchAll() 31 .then(function(result){ 32 for(var i = 0; i < result.length; i++){ 33 var item = result[i]; 34 list += '<li>' + item + '</li>'; 35 } 36 document.getElementById('ul01').innerHTML = list; 37 }) 38 .catch(function(err){ 39 alert(err); 40 }); 41 42 </script> 43 44</head> 45<body> 46 <ons-page> 47 <ul id="ul01"></ul> 48 </ons-page> 49</body> 50</html>

プログラミン初心者なのでいろいろと自分なりに試しましたが、[object object]で表示されてしまいます。
ご回答よろしくお願いします。

今回の質問にあまり関係がないですが、使う用途としては、リレーションからデータを取得したい時に親になっているデータストアのobject形式データが必要になると思い、質問させていただきました。

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

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

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

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

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

otak-lab

2020/05/12 03:06

Chrome DevToolsを利用してブレイクポイントを置いて、itemの中身を確認すればよいかと思います。
todayyy

2020/05/13 07:04

アドバイスありがとうございます!
guest

回答1

0

自己解決

無事取得することができました。ons-list-itemのdata型から取得する時にstring型になっていたのが原因だったみたいです。
[object object] → ”[object object]”の文字列として取得されることから、
ons-list-itemのdataに挿入する前にJSON.stringifyで文字列化し、ons-list-itemのdataから受け取った後にJSON.parseでobject型したところ無事取得できました。

リレーションで検索するためのrelatedToを使用するためにobjectを取得したのですが、エラーが出るので実用はできていないです。それはまた別の質問投稿をさせていただきます。
ちなみにエラー内容は
InvalidargumentError: First argument requires saved object.
になります。

HTML

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 15 <script> 16 17 if (ons.platform.isIPhoneX()) { 18 document.documentElement.setAttribute('onsflag-iphonex-portrait', ''); 19 document.documentElement.setAttribute('onsflag-iphonex-landscape', ''); 20 } 21 22 </script> 23 <script src="test.js"></script> 24</head> 25<body> 26 <ons-page> 27 <ons-list id="ul01"></ons-list> 28 </ons-page> 29</body> 30</html>

javascript

1 const appKey = "xxxxx"; 2 const clientKey = "xxxx"; 3 4 var ncmb = new NCMB(appKey, clientKey); 5 6 var testclass = ncmb.DataStore('CHANNEL'); 7 var list = ""; 8 testclass 9 .fetchAll() 10 .then(function(result){ 11 for(var i = 0; i < result.length; i++){ 12 var item = result[i]; 13 var item02 = JSON.stringify(item); 14 //console.log(JSON.stringify(item)); 15 list += "<ons-list-item onclick='test(this);' tappable data-id='" + item02 +"'>" + i + "</ons-list-item>"; 16 } 17 document.getElementById('ul01').innerHTML = list; 18 19 }) 20 .catch(function(err){ 21 alert(err); 22 }); 23 24 function test(a){ 25 var b = a.getAttribute("data-id"); 26 var c = JSON.parse(b); 27 alert( c ); 28 29 }

投稿2020/05/13 07:25

編集2020/05/13 07:26
todayyy

総合スコア31

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.54%

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

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

質問する

同じタグがついた質問を見る

JavaScript

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

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。