Reactjs - React を使用してオブジェクトを含む配列をマッピングしたい

okwaves2024-01-25 9

次のような構造の配列があります。この配列は postgresql データベースから次のように取得しました。

[{"pp_all":"{"pp_ident":43,"pp_title":"abc","pp_beschreibung":null}]

REACT を使用してこの配列をマッピングします。

 {gesamt.map((elemt, index) => (
        <>
          <h5 key={index}>{elemt.pp_all}</h5>
        </>
 ))}

その結果、ブラウザでは次のように表示されます。

{"pp_ident":43、"pp_title":"abc"、"pp_beschreibung":null}

個々の属性の値を取得するにはどうすればよいですか?

編集

結果の data.pp_all の上にカーソルを置くと、次のような結果が得られます:

"{"pp_ident":43、"pp_title":"abc"、"pp_beschreibung":null}"

フロントエンドの形式が間違っていると思います。でもどうしてそうなるのでしょう、だって印刷して使用すると、上記が表示されます。

そして、次のことを実行しようとすると:

 {gesamt.map((data) => {
    console.log(data.pp_all.pp_titel);
 })}

未定義のエラーが発生しました

<h5 key={index}>{elemt.pp_all.pp_ident}</h5>

– bakar_dev

2020 年 9 月 3 日 9:17

------------------------

別のドットで個々の属性をターゲットにする必要があります。次のように

{elemt.pp_all.pp_indent}
{elemt.pp.all.pp_titel} and so on..

オブジェクトを取得したので、ターゲットやオブジェクトのプロパティと同じように機能します

------------------------

上記の回答は、個々のフィールドにアクセスする方法を示していますが、HTML で提示した方法ですべての値を表示したい場合は、そのオブジェクトのキーをループして、次のように値を返すことができます。

 {gesamt.map((elemt, index) => (
        <>
          <h5 key={index}>{Object.keys(elemt.pp_all).map(key => elemt.pp_all[key])}</h5>
        </>
 ))}

------------------------

必要ですo 各オブジェクトを反復して属性値を取得します

gesamt.map(data => {    
   for (let key in data ) {
       <h5>{data[key].pp_titel}</h5>
       <h4>{data[key].pp_ident}</h4>
   }
})