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

Question

実現したいこと

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

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

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

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

該当のソースコード

{
	"Test": [
		"01",
		"02",
		"03"
	]
}

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

試したこと・調べたこと

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

上記の詳細・結果

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

let testJSON = 'test.json';
jQuery.getJSON(testJSON, function(data){
  var dict = {
      "01": "りんご",
      "02": "ゴリラ",
      "03": "ラッパ",
    };
    var testData = data.Test;
    var newData = [];
    for (i=0;i<testData.length;i++) {
      var elem = testData[i];
      var newElem = Object.assign(
        {},
        elem,
        { name: dict[elem] }
      );
      newData.push(newElem);
    }

  let sampleHTML = '<p>' + newData + '</p>';
  document.querySelector('body div').insertAdjacentHTML('beforeend', sampleHTML);
});

Comments

[maisumakun]

> 上記の質問を参考にしてみましたが、うまくいきませんでした。

失敗したコードもご提示いただければ幸いです。

[aDGDy02001]

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

[otn]

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

[otn]

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

Answer 1

質問文のコードの

    var newData = [];
    for (i=0;i<testData.length;i++) {
      var elem = testData[i];
      var newElem = Object.assign(
        {},
        elem,
        { name: dict[elem] }
      );
      newData.push(newElem);
    }

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

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

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

Comments

[aDGDy02001]

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

Answer 2

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

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

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

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

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

• 確認用サンプル： https://codepen.io/at01/pen/OJeWdom?editors=0010

Answer 3

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

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

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

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

Comments

[aDGDy02001]

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

[yambejp]

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