javascript 複数の戻り値を取得したい

複数の戻り値を取得したかったので、下記サイトを参考にしたのですが、上手くいきませんでした。
https://mayer.jp.net/?p=5307

num = item();でnum.item1の中に値が格納されていると思ったんですが、undefinedと表示されました。
console.logで確かめたらitem1に入る前に実行されているからundefinedと表示されるのかなと思って下の階層に書いてみたんですが、エラーが出ました。
改善策として何も思いつかず、、、

item1,item2,item3を取得したいのですが、どうしたらいいでしょうか。
分かる方、教えて頂きたいです。

html
1<!DOCTYPE html>
2<html lang="">
3
4<head>
5  <meta charset="UTF-8">
6  <title>Untitled Document</title>
7  <meta name="Author" content="" />
8  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
9</head>
10
11<body>
12  <input type="checkbox" onchange="sample(this.checked)">クリック
13  <script>
14    var id = "1234567890";
15
16    function item() {
17      var item1;
18      var item2;
19      var item3;
20
21      $.getJSON("data.json", function(data) {
22        for (var i in data[0]) {
23          if (/item/.test(i)) {
24            var itemNumber = data[0][i].value.itemId.value;
25            console.log(itemNumber);
26            if (id == itemNumber) {
27              item1 = data[0][i].value.apple.value;
28              item2 = data[0][i].value.name.value;
29              item3 = data[0][i].value.itemName.value;
30              console.log(item1);
31            }
32          }
33        }
34      })
35      return {
36        "item1": item1,
37        "item2": item2,
38        "item3": item3
39      };
40    }
41
42    function sample(value) {
43      var num;
44      if (value) {
45        $.getJSON("data.json", function(data) {
46          for (var i in data[0]) {
47            if (/item/.test(i)) {
48              num = item();
49              //num.item1
50              //num.item2
51              //num.item3が使えるはず
52              console.log(num.item1)
53            }
54            //エラー
55            //console.log(num.item1);
56          }
57        })
58      }
59    }
60  </script>
61
62</body>
63</html>
64

json
1[
2  {
3    "id": "12321",
4    "sample": "23121",
5    "item01": {
6      "value": {
7        "apple": {
8          "value": 50
9        },
10        "user": {
11          "value": 50
12        },
13        "name": {
14          "value": "箱"
15        },
16        "itemId": {
17          "value": "1234567890"
18        },
19        "itemName": {
20          "value": "タイトル"
21        }
22      },
23      "item02": {
24        "value": {
25          "apple": {
26            "value": 10
27          },
28          "name": {
29            "value": 15
30          },
31          "name1": {
32            "value": "箱"
33          },
34          "itemId": {
35            "value": "1234567893"
36          },
37          "itemName": {
38            "value": "タイトル"
39          }
40        }
41      }
42    }
43  }
44]
45

takopo

2020/09/22 21:28

item1 item2 item3 には何が入っててほしいのでしょうか…？

退会済みユーザー

2020/09/22 21:56

item1 = data[0][i].value.apple.value; item2 = data[0][i].value.name.value; item3 = data[0][i].value.itemName.value; この時点でitem1 = 50, item2= "箱", item="タイトル"が格納されると思っています。その格納された3つの値をsample()の方で使えるようにしたいです。。。

-___-

2020/09/22 22:57

item01とitem02が別の階層のようですが、jsonの構造はそちらで間違いございませんか？現状では以下の構造ですが [ {id:"12321", item01:{}, sample:"23121"} ] 以下ではないのでしょうか [ {id:"12321", item01:{}, item02:{}, sample:"23121"} ]

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

回答2件

ベストアンサー

item1,item2,item3を取得したいのですが、どうしたらいいでしょうか

item1,item2,item3を取得する以前に、処理の流れをまとめたほうが良いと思います。

$.getJSON("data.json") のコールバック内で $.getJSON("data.json") を再実行しています。
これはサーバー（同一URL）へのGET要求を無意味に繰り返し、サーバー負荷を２倍にするコードです。

まずは、処理順を見直します。

サーバーに data.json をGET要求 sample() が担う。data は取得済み
受け取った data (JSON) を解析 item() が担う。（ご質問にある「返却値」）
変数に格納

以下、ご質問にある「返却値」についてのみ回答し、JSONの解析順序については省略します。

javascript
1function item( oj ) {
2  var item1, item2=, item3;
3
4  /* oj処理 : data.json を解析した一部が渡されている */
5  // oj処理は後ほど実装するとして、ダミーデータで「複数の戻り値」を確認
6  item1="A"; // oj.apple.value
7  item2="B"; // oj.name.value
8  item3="C"; // oj.itemName.value 
9
10  return {
11    "item1": item1,
12    "item2": item2,
13    "item3": item3
14  };
15}
16
17function sample(value) {
18  var num;
19  if (!value) return;
20
21  $.getJSON("data.json", function(data) {
22    let oj = data[0];
23    for (var prop in oj) {
24      console.log( prop, oj[prop] );
25
26      if (/^item/.test(prop)) {
27        num = item( oj[prop].value ); // 引数に解析したい object を渡す
28        
29        console.log(num);
30        // 「複数の戻り値」が確認できる。
31        // {item1:"A", item2:"B", item3:"C"}
32      }
33      else {
34        //エラー
35        console.log( `no item prop` );
36      }
37    }
38  });
39}
40

投稿2020/09/22 23:10

編集2020/09/22 23:19

AkitoshiManabe

総合スコア5432

JSONの階層がおかしい点、$.getJSONを2重に実行している点については既に指摘されているので、undefinedの原因を調べてみました。
item()に下記のログ出力を追加しました。

JavaScript
1    function item() {
2      var item1;
3      var item2;
4      var item3;
5
6      $.getJSON("data.json", function(data) {
7        for (var i in data[0]) {
8          if (/item/.test(i)) {
9            var itemNumber = data[0][i].value.itemId.value;
10            console.log(itemNumber);
11            if (id == itemNumber) {
12              item1 = data[0][i].value.apple.value;
13              item2 = data[0][i].value.name.value;
14              item3 = data[0][i].value.itemName.value;
15              console.log(item1);
16            }
17          }
18        }
19        console.log('getJSON()');   // 処理順序を確認するため追加
20      })
21      console.log('item()');        // 処理順序を確認するため追加
22      return {
23        "item1": item1,
24        "item2": item2,
25        "item3": item3
26      };
27    }

出力されたログは下記の通りです。

item() json.html:36:15
undefined json.html:54:23
item() json.html:36:15
undefined json.html:54:23
1234567890 json.html:25:21
50 json.html:30:23
1234567893 json.html:25:21
getJSON() json.html:34:17
1234567890 json.html:25:21
50 json.html:30:23
1234567893 json.html:25:21
getJSON() json.html:34:17