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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1079閲覧

【JS】JSONから取得した配列をJSの配列に入れ直したいです。

toyamal

総合スコア28

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/04/07 05:25

前提・実現したいこと

JS、jQueryで開発しています。
APIで取得した以下のJSONデータの配列をJSの以下の配列に入れ直したいです。

試行錯誤したのですが、上手くいかなかったのでご質問させていただきました。
わかる方がいらっしゃいましたらご教授頂けますと幸いです。

JSON

1{ 2 "hits": [ 3 { 4 "groupId": 1, 5 "parentGroupId": "", 6 "itemCode": "", 7 "itemName": "テスト1", 8 "sortOrder": 1 9 }, 10 { 11 "groupId": 2, 12 "parentGroupId": "", 13 "itemCode": "", 14 "itemName": "テスト2", 15 "sortOrder": 2 16 }, 17 { 18 "groupId": 3, 19 "parentGroupId": "", 20 "itemCode": "", 21 "itemName": "テスト3", 22 "sortOrder": 3 23 }, 24 { 25 "groupId": 9, 26 "parentGroupId": "1", 27 "itemCode": "", 28 "itemName": "テスト1-1", 29 "sortOrder": 1 30 }, 31 { 32 "groupId": 11, 33 "parentGroupId": "1", 34 "itemCode": "", 35 "itemName": "テスト1-2", 36 "sortOrder": 7 37 }, 38 { 39 "groupId": 14, 40 "parentGroupId": "1", 41 "itemCode": "", 42 "itemName": "テスト1-3", 43 "sortOrder": 12 44 }, 45 { 46 "groupId": 13, 47 "parentGroupId": "1", 48 "itemCode": "", 49 "itemName": "テスト1-4", 50 "sortOrder": 12 51 }, 52 { 53 "groupId": 1029, 54 "parentGroupId": "9", 55 "itemCode": "10", 56 "itemName": "テスト結果10", 57 "sortOrder": 2 58 }, 59 { 60 "groupId": 1026, 61 "parentGroupId": "9", 62 "itemCode": "20", 63 "itemName": "テスト結果20", 64 "sortOrder": 7 65 }, 66 { 67 "groupId": 1031, 68 "parentGroupId": "9", 69 "itemCode": "30", 70 "itemName": "テスト結果30", 71 "sortOrder": 11 72 }, 73 { 74 "groupId": 1076, 75 "parentGroupId": "9", 76 "itemCode": "", 77 "itemName": "テスト9-1", 78 "sortOrder": 18 79 } 80 ] 81}

js配列

1[ 2 { "id" : JSONのgroupId , "parent" : JSONのparentGroupId, "text" : JSONのitemName }, 3    { "id" : JSONのgroupId , "parent" : JSONのparentGroupId, "text" : JSONのitemName }, 4    ....JSONデータの数だけ格納 5 6]

jsonを取得しているソースが以下になります。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/themes/default/style.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/jstree.min.js"></script> </head> <body> <input id="search" type="button" value="検索" /> <div id="jstree"></div> <script type="text/javascript"> let data1 = []; $('#search').click(function() { let hostUrl = "http://localhost:3000/hits"; $.ajax({ type: 'get', url: hostUrl, dataType : 'json' }).done(function(data){ console.log("success"); data1 = data; console.log(data.itemName); $('#jstree').jstree({ 'core': { 'data' : [ //ここに入れ直した配列を入れたいです。 ] } }) }).fail(function(){ alert('データが無いです'); $('#zip').val(""); }); }); </script> </body> </html>

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答2

0

ベストアンサー

Array.mapで出来ます。

javascript

1const json = `{ 2 "hits": [ 3 { 4 "groupId": 1, 5 "parentGroupId": "", 6 "itemCode": "", 7 "itemName": "テスト1", 8 "sortOrder": 1 9 }, 10 { 11 "groupId": 2, 12 "parentGroupId": "", 13 "itemCode": "", 14 "itemName": "テスト2", 15 "sortOrder": 2 16 }, 17 { 18 "groupId": 3, 19 "parentGroupId": "", 20 "itemCode": "", 21 "itemName": "テスト3", 22 "sortOrder": 3 23 }, 24 { 25 "groupId": 9, 26 "parentGroupId": "1", 27 "itemCode": "", 28 "itemName": "テスト1-1", 29 "sortOrder": 1 30 }, 31 { 32 "groupId": 11, 33 "parentGroupId": "1", 34 "itemCode": "", 35 "itemName": "テスト1-2", 36 "sortOrder": 7 37 }, 38 { 39 "groupId": 14, 40 "parentGroupId": "1", 41 "itemCode": "", 42 "itemName": "テスト1-3", 43 "sortOrder": 12 44 }, 45 { 46 "groupId": 13, 47 "parentGroupId": "1", 48 "itemCode": "", 49 "itemName": "テスト1-4", 50 "sortOrder": 12 51 }, 52 { 53 "groupId": 1029, 54 "parentGroupId": "9", 55 "itemCode": "10", 56 "itemName": "テスト結果10", 57 "sortOrder": 2 58 }, 59 { 60 "groupId": 1026, 61 "parentGroupId": "9", 62 "itemCode": "20", 63 "itemName": "テスト結果20", 64 "sortOrder": 7 65 }, 66 { 67 "groupId": 1031, 68 "parentGroupId": "9", 69 "itemCode": "30", 70 "itemName": "テスト結果30", 71 "sortOrder": 11 72 }, 73 { 74 "groupId": 1076, 75 "parentGroupId": "9", 76 "itemCode": "", 77 "itemName": "テスト9-1", 78 "sortOrder": 18 79 } 80 ] 81}` 82 83const data = [JSON.parse(json).hits.map((x) => { 84 return {'id' : x.groupId , 'parent' :x.parentGroupId, 'text' : x.itemName }; 85})];

投稿2021/04/07 05:45

fijino

総合スコア136

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

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

toyamal

2021/04/07 06:00

ありがとうございます! こちらを 'data' :[ data1 ] でよろしいのでしょうか?
toyamal

2021/04/07 06:11

いろいろ試してみた所配列には格納できたのですが、 data.lengthは1になります。 なぜでしょうか?
fijino

2021/04/07 06:12

'core': { 'data' : data } 配列に入れているのでdataをそのままいれれば良いです。 わからなければconsole.logなりで確認してください
fijino

2021/04/07 06:17 編集

欲しい結果を見間違えていました、以下に変更してください const data = JSON.parse(json).hits.map((x) => { return {'id' : x.groupId , 'parent' :x.parentGroupId, 'text' : x.itemName }; });
toyamal

2021/04/07 06:17

ありがとうございます! 無事解決しました!
guest

0

投稿2021/04/07 05:40

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

toyamal

2021/04/07 06:18

ありがとうございます! 助かります!
退会済みユーザー

退会済みユーザー

2021/04/07 08:57

jQueryのリファレンスと、MDNのjavascriptリファレンスは、時間があったら一通り目を通すといいかも。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問