質問店の明確化JSでJSON配列を用いたデータ作成（クラスを使用すればいい？）

Question

前提・実現したいこと

          id:40,
          page: 3,
          question:'\( 32+1=\input\input  \)',
          correct:'',
          answer:23,
          digits:2,
          value: ''
        },{
          id:41,
          page: 3,
          question:'\( 33+1=\input\input  \)',
          correct:'',
          answer:23,
          digits:2,
          value: ''
        },{
          id:42,
          page: 3,
          question:'\( 34+1=\input\input  \)',
          correct:'',
          answer:23,
          digits:2,
          value: ''
        },
]

このようなデータ構造を同的に作成したい。

やりたいことの具体案

class Hoge{
  constructor(num, name) {
    this.num = num;
    this.name = name;
  }
  obj = {
    num: num,
    name: name,
    pageNum: pageNum
  }
}

受け取るデータ（これを元にしてデータを作成したい）

[
  {
    "1": "(1) 1  2  3  ▯  5  6  7  8  9  10",
    "2": "(2) 11  ▯  13  14  15  16  17  18  19  20",
    "3": "(3) ▯  22  23  24  25  26  27  28  29  30",
    "4": "(4) 31  32  33  34  ▯  36  37  38  39  40",
    "5": "(5) 41  42  43  ▯  45  46  47  48  49  50",
    "6": "(6) 51  52  53  54  55  56  57  ▯  59  60",
    "7": "(7) 61  62  63  64  65  66  67  68  ▯  70",
    "8": "(8) 71  72  73  74  75  76  ▯  78  79  80",
    "9": "(9) 81  82  83  84  85  ▯  87  88  89  90",
    "10": "(10) 91  92  93  94  95  96  97  98  99  ▯"
  },
  {
    "1": "(1) 1+1=",
    "2": "(2) 4+1=",
    "3": "(3) 5+1=",
    "4": "(4) 7+2=",
    "5": "(5) 10+2=",
    "6": "(6) 1+2=",
    "7": "(7) 5+2=",
    "8": "(8) 6+3=",
    "9": "(9) 10+3=",
    "10": "(10)12+3="
  },
  {
    "1": "(1) 3+4=",
    "2": "(2) 4+4=",
    "3": "(3) 8+5=",
    "4": "(4) 6+5=",
    "5": "(5) 2+6=",
    "6": "(6) 8+6=",
    "7": "(7) 9+7=",
    "8": "(8) 7+8=",
    "9": "(9) 8+9=",
    "10": "(10)6+10="
  },
  {
    "1": "(1) 13+6=",
    "2": "(2) 14+7=",
    "3": "(3) 15+8=",
    "4": "(4) 16+9=",
    "5": "(5) 17+10=",
    "6": "(6) 18+12=",
    "7": "(7) ひっさん11+4=",
    "8": "(8) ひっさん26+5=",
    "9": "(9) ひっさん15+15=",
    "10": "(10)ひっさん123+13="
  },
  {
    "1": "(1) 4-1=",
    "2": "(2) 8-2=",
    "3": "(3) 11-3=",
    "4": "(4) 10-5=",
    "5": "(5) 9-7=",
    "6": "(6) 11-8=",
    "7": "(7) 15-4=",
    "8": "(8) 20-6=",
    "9": "(9) ひっさん10-4=",
    "10": "(10)ひっさん34-12="
  },
  {
    "1": "(1) 2×2=",
    "2": "(2) 4×3=",
    "3": "(3) 5×4=",
    "4": "(4) 6×5=",
    "5": "(5) 7×6=",
    "6": "(6) 8×7=",
    "7": "(7) 9×8=",
    "8": "(8) 3×9=",
    "9": "(9) 8×3=",
    "10": "(10)2×5="
  }
]

Comments

[Lhankor_Mhy]

JSONは関係ない感じですか？

[KokubuRyuji]

今回は別のところで取得してきたJSONデータを他のデータとすり合わせて、もう一つ別のJSONとして扱いたく思ってます。

[Lhankor_Mhy]

些末なことで申し訳ないのですが、JSONは文字列データですので、実際にはオブジェクトを取り扱いたいということでいいですよね？

[KokubuRyuji]

左様でございます。最終的にJSON文字列からparseしてオブジェクトとして扱うつもりです。

[yambejp]

> データ構造を同的（動的？）に作成したい

何がしたいか曖昧です。
そのようなデータ構造の記述をするだけでは？

[Lhankor_Mhy]

ん？違うのかな？
「別のところで取得してきたJSONデータを他のデータとすり合わせ」というのは、入力がJSONということですか？

[Lhankor_Mhy]

「最終的にJSON文字列からparseしてオブジェクトとして扱うつもり」ということは、途中ではテキストデータを取り扱いたいのですか？

[miyabi-sun]

クラス名もHogeと抽象的だし
本文もよく分からんし、結局何がやりたいのか説明出来てません。
「さまざまな方法」と言われても回答者側には全く見えて来ません。

最大限汲み取った内容を回答として載せますが、
目的が達成出来ないなら、私の回答文を元に「やりたいことの本質」に着目しながら質問文を編集してみてください。

[KokubuRyuji]

オブジェクトの型のみを定義し、その型に要素を任意の数だけ入れてそれをJSON配列としたく考えております。

[Lhankor_Mhy]

ご希望の動作を「このような入力に対して」「このような出力をしたい」のように書くことはできますか？

[Lhankor_Mhy]

「JSON配列」とは、JSONのテキストが入った配列ということでいいですか？

[Lhankor_Mhy]

申し訳ないのですが、独自用語はご質問の中では控えていただいた方が、話が通じやすそうな気がします。

[KokubuRyuji]

たくさんのコメントいただきありがとうございます。
最終的に作成したいデータは
{
id:40,
page: 3,
question:'\\( 32+1=\\input\\input \\)',
correct:'',
answer:23,
digits:2,
value: ''
}
このような形のものとなりますが、
question部とanswer部はAPIを叩いて取得したいと考えております。
このデータ構造をn回繰り返したく考えておりますが、必要な分だけ記述するいわゆるハードコーディングではなく、データ構造を用いてAPIを叩いたデータをこのデータ構造内に入れてたく考えております。

分かりづらい説明で恐縮ですが、よろしくお願いいたします。

[KokubuRyuji]

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/JSON
こちらにJSON配列と表記がありましたので、使用していました。すみません。

[Lhankor_Mhy]

ということは、入力がn個あるということですね。
問題を把握しました。
（とはいえ、miyabi-sunさんがご回答しそうなので様子を見ます）

[Lhankor_Mhy]

> こちらにJSON配列と表記がありました

おお、ほんとですね。これは失礼いたしました。

[KokubuRyuji]

お手を煩わせてしまって申し訳ないです。
先ほどn個と申し上げましたが、正確には６０個を作成予定でいます。

[miyabi-sun]

回答しました！……話が違うんだけど（白目
もう少しこういうものを作りたいという具体例を質問文に記載するようにしてください。
データの入力と出力も定義してみてください。

[Lhankor_Mhy]

編集拝読。
どのデータがどこに照合しているのか全く分かりませんが、
miyabi-sunさんのご回答の1番目のコードをひねれば済む話のような気がしますね。

どういった部分がわかりませんか？

[KokubuRyuji]

作成したいデータ構造がそれでは不足してしまうと思うのですが、、。どうでしょうか？

[Lhankor_Mhy]

繰り返しになって申し訳ないのですが、どのデータがどのプロパティのものなのかについて、おそらくあなたしかわからないと思いますので、データが不足するかどうかについてはあなた以外にはよくわからないと思います。

[Lhankor_Mhy]

たとえば、
id:40
の40は、いったいその入力データのどこから引っ張ってきたのか、全くわからないです。

'\\( 32+1=\\input\\input \\)'
に至っては、入力データにそのような文字列はないように見えています。

[Lhankor_Mhy]

おそらく、プレースホルダなんでしょうけれど……
これだけで解釈をするのは、暗号解読をするようなものでは。

[KokubuRyuji]

際上記のものが実現したいJSON配列になります。
そして今回APIを叩いて取得できるデータをもとに（実際にはいる属性はquestion。それ以外は今のところNullでOK）、際上記のデータ構造としてJSONを作成したく思います。

[KokubuRyuji]

idは自動生成のものと考えております。（for文を回した回数で考えるつもりでいます。）

[Lhankor_Mhy]

つまり、
[
{
id: null,
page: null,
question: "(1) 1 2 3 ▯ 5 6 7 8 9 10",
correct: null,
answer: null,
digits: null,
value: null
},

ということですね？

[KokubuRyuji]

はい。左様です。とりあえずそのつもりで考えております。

[Lhankor_Mhy]

> idは自動生成のものと考えております

それ、書かなくても相手に伝わるもんですかね……？

[Lhankor_Mhy]

miyabi-sunさんのコードだと、データが足りないというのは、具体的にはどういうご懸念ですか？

[KokubuRyuji]

いずれそのデータにもう一つAPIを叩き、得られたデータを振り分けていく予定でいますので、データ構造だけは定義しておきたく考えております。
そして、先ほどのMiyabi様の例ですと、もともとあるJSONのデータ構造しか受け付けなくなってしまうと思うのですが、思い違いでしょうか。如何せん、JSのクラスの知識が浅いので完全に違うとも言えないのですが。。

[Lhankor_Mhy]

「ひねれば」というのは、「コードを変更すれば」という意味で書きました。
「そのまま使えば」という意味ではありません。わかりにくくて申し訳ないです。

JSON.parse(json) の部分を配列化した入力データにすればいいかと思います。

[Lhankor_Mhy]

もちろん、Hoge も書き換える必要があります。念のため。

[Lhankor_Mhy]

ん？違うのかな？
後からプロパティを追加したい、という意味ですか？

[KokubuRyuji]

その辺は踏まえた上で話を進めています。
Miyabi様のコードですと、あらかじめ、整えられたデータをただJSON配列に直している処理にしか見えないのですが、他の値を属性に入れていくことは可能なのでしょうか？
作成したいデータはLhankor様が先ほど述べられていたものに相違ございません。

[KokubuRyuji]

左様です。イメージで言うとそうですね。
追加というよりは、空のデータ構造に値を入れると言う方が近いような気もします。

[Lhankor_Mhy]

つまり、プロパティに値を割当するメソッドの書き方がわからない、ということですか？

[KokubuRyuji]

そうですね。そのようなことになるかと思います。（わかりづらくてすみません。）

Answer 1

こういうことですか？

class Hoge {
  constructor(question) {
    this.num = null;
    this.name = null;
    this.question = question;
  }
  addNum(num) {
    this.num = num
  }
}

hoge = new Hoge('q'); // Object { num: null, name: null, question: "q" }
hoge.addNum(1);
console.log(hoge); // Object { num: 1, name: null, question: "q" }

Comments

[KokubuRyuji]

ありがとうございます。
おかげで実装するヒントを得られました。

ちょっとこれでやってみたいと思います。
最後までお付き合いいただいたLhankor様をベストアンサーとさせていただきたいと思います。

ありがとうございました！

Answer 2

const json = JSON.stringify([
  {num: 2, name: 'Ichiro'},
  {num: 3, name: 'Tarou'}
]);

class Hoge {
  constructor({num, name}) {
    this.num = num;
    this.name = name;
  }
  // 後で再度JSONに固め直しやすいようにしておく
  toObject () {
    const {num, name} = this;
    return {num, name};
  }
}

JSON.parse(json)
  .map(it => new Hoge(it));
// [Hoge, Hoge]

まぁイメージはこういうことですよね。
やればいいじゃん終わりになるので、
何を聞きたいかに着目して話を膨らませていきます。

ありがちな例を挙げると
配列の1個目と、2個目のデータは別の型にして管理したいという例ですね。
イメージとしてはこんな感じでしょうか？

const json = JSON.stringify([
  {num: 2, name: 'Ichiro'},
  {num: 3, name: 'Tarou'}
]);

class UserRole {
  constructor({num, name}) {
    this.num = num;
    this.name = name;
  }
  toObject () {
    const {num, name} = this;
    return {num, name};
  }
  isMatch (it) {
    return false;
  }
}

class Admin extends UserRole {
  isMatch ({num}) {
    return num == 2;
  }
}

class User extends UserRole {
  isMatch ({num}) {
    return num == 3;
  }
}

// 仕分ける専用の関数を一段噛ませる
const classify = it => {
  if (Admin.isMatch(it)) return new Admin(it);
  if (User.isMatch(it)) return new User(it);
}

JSON.parse(json).map(classify);
// [Admin, User]

Comments

[KokubuRyuji]

すみません。そうではありません。
もう少し詳細に質問内容を記述いたします。