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

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

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

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

jQuery

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

Q&A

解決済

3回答

402閲覧

JSONデータから取得した値をJSで文字列として変換したい

aDGDy02001

総合スコア23

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

jQuery

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

0グッド

2クリップ

投稿2024/07/30 11:40

編集2024/07/30 12:20

実現したいこと

取得したJSONデータの"01"を「りんご」、"02"を「ゴリラ」、"03"を「ラッパ」のように、JavaScriptもしくはjQueryを使い任意の文字列に変換した上で、HTML上に書き出しをしたいです。

前提としてJSONデータは編集できません。

発生している問題・分からないこと

JSONデータから値を取得して、HTML上に書き出すところまでは実装できています。
しかし、JSONデータを変換するところで行き詰まっています。

該当のソースコード

test.json

1{ 2 "Test": [ 3 "01", 4 "02", 5 "03" 6 ] 7}

sample.js

1let testJSON = 'test.json'; 2jQuery.getJSON(testJSON, function(data){ 3 var testData = data.Test; 4 let sampleHTML = '<p>' + testData + '</p>'; 5 document.querySelector('body div').insertAdjacentHTML('beforeend', sampleHTML); 6});

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

https://teratail.com/questions/180402
上記の質問を参考に下記のように実装してみましたが、うまくいきませんでした。

sample2.js

1let testJSON = 'test.json'; 2jQuery.getJSON(testJSON, function(data){ 3 var dict = { 4 "01": "りんご", 5 "02": "ゴリラ", 6 "03": "ラッパ", 7 }; 8 var testData = data.Test; 9 var newData = []; 10 for (i=0;i<testData.length;i++) { 11 var elem = testData[i]; 12 var newElem = Object.assign( 13 {}, 14 elem, 15 { name: dict[elem] } 16 ); 17 newData.push(newElem); 18 } 19 20 let sampleHTML = '<p>' + newData + '</p>'; 21 document.querySelector('body div').insertAdjacentHTML('beforeend', sampleHTML); 22});

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

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

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

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

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

maisumakun

2024/07/30 11:49

> 上記の質問を参考にしてみましたが、うまくいきませんでした。 失敗したコードもご提示いただければ幸いです。
aDGDy02001

2024/07/30 11:56

試したコードを追記いたしました。
otn

2024/07/30 11:58

"テスト1"とかの文字列がどこにもないのに、"01"をどうやって変換する考えですか? "01"の1の位の文字に"テスト"を前置して"テスト1"にするとかですかね?
otn

2024/07/30 14:36

入れ違いで質問がガラッと書き換わりましたね。 すでに書き換え後の質問に回答が付いてますね。失礼しました。
guest

回答3

0

ベストアンサー

質問文のコードの

js

1 var newData = []; 2 for (i=0;i<testData.length;i++) { 3 var elem = testData[i]; 4 var newElem = Object.assign( 5 {}, 6 elem, 7 { name: dict[elem] } 8 ); 9 newData.push(newElem); 10 }

この部分を、以下のようにしましょう。

js

1 const newData = testData.map(elem => dict[elem]);

Object.assign() を使う必要はないと思います。よく理解できないコードは利用しないことをお勧めします。

投稿2024/07/30 13:50

編集2024/07/30 13:53
int32_t

総合スコア21525

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

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

aDGDy02001

2024/07/31 03:51

該当の箇所、変更することで変換できました!ありがとうございます。
guest

0

まず関数を作っておきます。
どのような関数かというと、'01', '02' ・・・ といった0始まりの数字の文字列を引数に与えると、それに対応する単語を返すようなものです。色々な書き方があり得ますが、たとえばこのようなものです。

javascript

1const getWordByCode = code => ( 2 { '01': 'りんご', '02': 'ゴリラ', '03': 'ラッパ' }[code] || '不明' 3)

この関数を使って、質問にあるコード sample.js に含まれる下記の1行を修正します。

diff

1- var testData = data.Test; 2+ var testData = data.Test.map(getWordByCode);

このように修正すると、配列 data.Test の各要素を引数としてはじめに作っておいた getWordByCode 関数が実行されて、これが返した単語の配列が testData に得られます。

投稿2024/07/31 02:13

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

01がテスト1になるロジックがわかりませんが、こんな感じ

html

1<script> 2fetch('test.json').then(res=>res.json()).then(data=>{ 3 data.Test.reduce((x,y)=>(x.appendChild(Object.assign(document.createElement('p'),{textContent:`テスト${parseInt(y).toString()}`})),x),document.body); 4}); 5 </script>

変換表が別にあるならこんな感じでよいかも

javascript

1const dict = { 2 "01": "りんご", 3 "02": "ゴリラ", 4 "03": "ラッパ", 5 "04": "パイナップル", 6}; 7fetch('test.json').then(res=>res.json()).then(data=>{ 8 data.Test.forEach(x=>document.body.appendChild(Object.assign(document.createElement('p'),{textContent:dict[x]}))); 9});

投稿2024/07/30 12:17

編集2024/07/31 02:15
yambejp

総合スコア116176

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

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

aDGDy02001

2024/07/30 12:23

ややこしくて申し訳ございません。 テスト1はあくまでサンプルであり、実際は全く別の単語として変換したかったです。
yambejp

2024/07/31 00:20

変換表利用バージョンも追記しておきました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問