我的資料類似于 const 翻譯中的資料。
{
"item-0": {
"_quote-translation": "translation Data",
"_quote-translation-language": "English",
"_quote-translation-author-name": "",
"_quote-translation-source": ""
},
"item-1": {
"_quote-translation": "translation Data",
"_quote-translation-language": "English",
"_quote-translation-author-name": "",
"_quote-translation-source": ""
},
"item-2": {
"_quote-translation": "translation Data",
"_quote-translation-language": "English",
"_quote-translation-author-name": "",
"_quote-translation-source": ""
},
"item-3": {
"_quote-translation": "translation Data",
"_quote-translation-language": "English",
"_quote-translation-author-name": "",
"_quote-translation-source": ""
}
}
我想通過在 nextjs 中使用 map 函式來顯示所有翻譯及其語言。但它沒有回傳資料。
{translations.map((translation, index) => {
return (
<div key={index}>
<h2>name: {translation._quote-translation}</h2>
<h2>country: {translation._quote-translation-language}</h2>
<hr />
</div>
);
})}
如何在這個嵌套的 JSON 物件中讀取所需的資料？
uj5u.com熱心網友回復：
您可以使用它Object.keys來檢索物件中的所有鍵，然后遍歷 React 中回傳的鍵陣列以定位翻譯項：
return (
<div>
{/* Equivalent to ["item-0", "item-1", ...].map(...) */}
{ Object.keys(translation).map(itemId => (
<div key={itemId}>
<h2>
{/* Target the value by using the provided key */}
name: {translation[itemId]["_quote-translation"]}
</h2>
<h2>
country: {translation[itemId]["_quote-translation-language"]}
</h2>
<hr />
</div>
))}
</div>
);
此外，值得注意的是，在 JavaScript 中，translation.x-y-z如果鍵包含破折號，則不能使用點語法 ( ) 定位 JSON 鍵。您必須使用括號語法 ( translation["x-y-z"])。
如果可選鏈接成為要求，您可以使用translation?.["x-y-z"].
uj5u.com熱心網友回復：
你可以試試這個：
{Object.keys(translations).map((translation, index) => {
return (
<div key={index}>
<h2>name: {translations[`${translation}`]["_quote-translation"]}
</h2>
<h2>country: {translations[`${translation}`]["_quote-translation-language"]}</h2>
<hr />
</div>
)
}}
Object.keys(#object).map(...)基本上，我們可以使用或迭代任何物件Object.entries(#Object).map(...)
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/510064.html
下一篇：在保存到檔案之前附加json輸出