how to read nested JSON/array data?-CodePudding

My data is something like which is in a const translations.

{
  "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": ""
  }
}

I want to display all translations and their language by using map function in nextjs. But it is not returning the data.


    {translations.map((translation, index) => {
        return (
          <div key={index}>
            <h2>name: {translation._quote-translation}</h2>
            <h2>country: {translation._quote-translation-language}</h2>

            <hr />
          </div>
        );
      })}

How can I read the required data in this nested JSON object?

CodePudding user response：

You can use Object.keys to retrieve all of the keys within in a object, then iterate over the returned array of keys in React to target the translation item:

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>
);

Also, it should be worth noting that in JavaScript you cannot target a JSON key using dot syntax (translation.x-y-z) if the key contains dashes. You must use the bracket syntax (translation["x-y-z"]).

If optional chaining becomes a requirement, you can use translation?.["x-y-z"].

CodePudding user response：

Try this way:

  {Object.entries(translations).map(([index, translation]) => {
    return (
      <div key={index}>
        <h2>name: {translation._quote-translation}</h2>
        <h2>country: {translation._quote-translation-language}</h2>

        <hr />
      </div>
    );
  })}

CodePudding user response：

You can try this:

    {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>
      )
   }}

Basically, we can iterate any Object using Object.keys(#object).map(...) or Object.entries(#Object).map(...)