how to read nested JSON/array data?

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?

>Solution :

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"].