ncmb : JSON.parseでobject型したデータがrelatedToで反応しない

実現させたい事

ncmbのデータ一覧をons-listで表示させた一覧をタップ(PushPage)し、そのデータのリレーションをpushPageしたページで表示させる

試した事

ncmbのデータをJSON.stringifyを使用して文字列化した後、ons-list-itemのdataに挿入
list-itemのonclickからpushPageした後page2へgetAttributeで取得。
page1で取得した文字列をJSON.parseでobject型にした後、relatedToに挿入したところ、

> First argument requires saved object
とエラーが出ました。

リレーションの検索方法について
上記のサイトでは正常に動作しているのは確認済みなので、JSON.stringifyとJSON.parseに原因があるのか、私のobjectの取得の仕方が間違っているのか分かりません。
説明が分かりづらいかもしれませんが、何卒ご回答よろしくお願いします。

class_B

class_Bのリレーション

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="test2.js"></script>
24</head>
25<body>
26  <ons-navigator id="nav" page="page1.html"></ons-navigator>
27  <ons-template id="page1.html">
28  <ons-page>
29   <ons-list id="ul01"></ons-list>
30  </ons-page>
31  </ons-template>
32
33
34
35
36  <ons-template id="page1.html">
37  <ons-page>
38   <ons-list id="list01"></ul>
39  </ons-page>
40  </ons-template>
41
42      <ons-template id="page2.html">
43  <ons-page id="page2">
44    <p style="text-align:center">Page2</p>
45    <p style="text-align:center" id="p1">ここがncmbのテキストに代わる</p>
46  </ons-page>
47  </ons-template>
48</body>
49</html>

javascript
1//test2.js
2const appKey        = "xxxxxxxxxxxxx";
3const clientKey     = "xxxxxxxxxxxxx";
4var ncmb;
5var currentUser;
6
7ons.ready(function(){  
8  ncmb = new NCMB(appKey, clientKey);
9
10  var b_class = ncmb.DataStore('class_B');
11  var list = "";
12  b_class
13    .fetchAll()
14    .then(function(result){
15      for(var object1 of result){
16        var object2 = JSON.stringify(object1);
17        list += '<ons-list-item tappable onclick="test(this)" data='+ object2 +'>' + object1.objectId + '</ons-list-item>'
18      }
19      document.getElementById('list01').innerHTML =  list;
20    })
21});
22
23function test(list_data){
24  document.getElementById('nav').pushPage('page2.html' , {data: {listDATA: list_data.getAttribute('data') } } );
25};
26
27document.addEventListener('show' , function(event){
28  if(event.target.matches('#page2')){
29    var a = document.getElementById('nav').topPage.data.listDATA;
30    var b = JSON.parse(a);
31    var class_a = ncmb.DataStore('class_A');
32    class_a
33      .relatedTo(b , "tests")
34      .fetchAll()
35      .then(function(result){
36        for(var object3 of result){
37          alert(object3.text);
38        }
39      })
40      .catch(function(err){
41        alert("リレーション表示時のエラー: " + err);
42      });
43  }
44});

行動規範の内容に同意します

回答1件

自己解決

解決しました。HTMLはそのままです。

元から空の配列の変数にpushデータをプッシュしてons-list-itemのdata属性に連番リストを追加
↓
getAttributeで数値を取得(文字列として取得しているのでNumber()で数値化)
↓
pushPage時にdata値で変数[連番リスト]で保存
↓
topPage()で取得

途中からデータを増やしてリスト表示したところ、
リストの順番が不規則になったのでorder("createDate")を記入したところ、正常に動作しました。

javascript
1const appKey        = "xxxxxxxxxxxx";
2const clientKey     = "xxxxxxxxxxxxxx";
3var ncmb;
4var currentUser;
5
6ons.ready(function(){  
7  ncmb = new NCMB(appKey, clientKey);
8});
9
10
11var data1 = [];//からの配列変数
12ons.ready(function(){
13  var b_class = ncmb.DataStore('class_B');
14  var list = "";
15  
16  b_class
17    .fetchAll()
18    .then(function(result){
19      for(var i = 0; i < result.length; i++){
20        var object1 = result[i];
21        data1.push(object1);//空の配列変数にobjectを追加
22        
23        list += '<ons-list-item tappable onclick="test(this)" data='+ i +  '>' + object1.objectId + '</ons-list-item>'
24        
25      }
26      document.getElementById('ul1').innerHTML =  list;
27    })
28
29});
30
31function test(list_data){
32  var i = Number(list_data.getAttribute('data'));//リストの番号を取得 + 数値化
33//page2に移動する際、オブジェクトを取得　data1[i] →　ClassBのobject[i]
34  document.getElementById('nav').pushPage('page2.html' , {data: {listDATA: data1[i] } } );
35  
36};
37
38document.addEventListener('show' , function(event){
39  if(event.target.matches('#page2')){
40    //navigatorのdataからdata1[i]を取得
41    var class_B_object = document.getElementById('nav').topPage.data.listDATA;
42
43    var class_a = ncmb.DataStore('class_A');
44    class_a
45      .relatedTo(class_B_object , "tests")
46      .order("createDate")//順番が不規則なったので追記
47      .fetchAll()
48      .then(function(result){
49        for(var object3 of result){
50          document.getElementById('p1').textContent = object3.text;
51        }
52      })
53      .catch(function(err){
54        alert("リレーション表示時のエラー: " + err);
55      });
56  }
57});