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

実現させたい事

ncmbのデータストアからobject形式でデータを取得したいです。
（getcurrenUserに似たような形でデータストアにある１つの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形式データが必要になると思い、質問させていただきました。

otak-lab

2020/05/12 03:06

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

todayyy

2020/05/13 07:04

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

回答1件

自己解決

無事取得することができました。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      }