配列中のオブジェクトのあるプロパティの値を連結して表示させたい

Question

[
  {
    "text": "I",
    "data": {
      "role": "blue",
    }
  },
  {
    "text": " ",
    "data": {
      "role": "",
    }
  },
  {
    "text": "like",
    "data": {
      "role": "yellow",
    }
  },
  {
    "text": " ",
    "data": {
      "role": "",
    }
  },
  {
    "text": "yellow",
    "data": {
      "role": "red",
    }
  },
  {
    "text": " ",
    "data": {
      "role": "",
    }
  },
  {
    "text": "lemon",
    "data": {
      "role": "black",
    }
  }
]

以上の配列のJSONを、textのみ結合して、

I like yellow lemon

と表示させたいのですが、調べているのですが上手くいきません。どのように処理を行えばいよいでしょうか。

Comments

[yambejp]

yellowとlemonの間には半角スペースがいらないのでしょうか？

[sarukawa]

すみません、忘れていました。必要になります。

Answer 1

質問にある配列のJSONをパースして得られる配列をaryとして

ary.reduce((s, {text: w}) => `${s}${w}`, '')

???? サンプル

Answer 2

const json='[{"text": "I","data": {}},{"text": " ","data": {}},{"text": "like","data": {}},{"text": " ","data": {}},{"text": "yellow","data": {}},{"text": " ","data": {}},{"text": "lemon","data": {}}]';
const result=JSON.parse(json).map(x=>x.text).join('');
console.log(result);

※半角スペース調整しました

Comments

[sarukawa]

ありがとうございます。確かに確認できました！
追加で、dataオブジェクトにプロパティを追加して、そのプロパティと値によってカラー(色)を出し分けてみたいのですが、こちらも伺ってもよろしいでしょうか。よろしければJSON編集いたします。
よろしくお願いいたします。

[sarukawa]

JSONを編集しました。
Switch文によって,data.roleにより、ReactでのclassNameを利用して色の出し分けをしてみたいのですが、先程の連結して表示させるものと組み合わせるとなかなか上手くいきません。

[yambejp]

reactはちょっと専門外なので改めてタグづけして質問してみてはどうでしょう？
普通のjsなら各要素をspanに囲んでstyleでcolorを指定すると思います