How can I map though this array?

[francisceril]

Hello,

Can someone help me map this if it's even possible?

...
},
{
  "stats": [
        {
          "years-of-service": {
            "title": "Years of service",
            "value": "34"
          }
        },
        {
          "happy-clients": {
            "title": "Happy clients",
            "value": "1000"
          }
        },
        {
          "partners": {
            "title": "Products",
            "value": "10000"
          }
        },
        {
          "employees": {
            "title": "Employees",
            "value": "100"
          }
        },
        {
          "offices": {
            "title": "Offices",
            "value": "5"
          }
        }
      ]
  }

[amannn]

We have some docs on this here: https://next-intl-docs.vercel.app/docs/usage/messages#arrays-of-messages

Hope this helps!

[manu-kz]

Hi Amann,
I have a slighlty different problem here, I would like to map through similar subParagraphs (title + description see the json below), is there a way around the solution given in the doc ? It seems to me that it is not very adapted to this case, especially if I have a lot of subParagraphs.

Here the json file that I have to work with

{
        "title": "The simplest and .........",
        "subParagraphs": [
          {
            "title": "The advantages of .........",
            "description": "You benefit from ............."
          },
          {
            "title": "The same ..............",
            "description": "Like any ............."
          },
          {
            "title": "Do only .............",
            "description": "And no more ......................."
          },
          {
            "title": "The security ................",
            "description": "Every month, .............."
          },
          {
            "title": "Freely evolve ...........",
            "description": "By being ................"
          },
          {
            "title": "Take advantage ...............",
            "description": "We are referenced ......................."
          }
        ]
      }

  what do you think? 
  Thank you

[manu-kz]

I managed to find another solution, maybe not the cleanest but it works.
Here is what I do :
import one of the translation file
loop in the message array to recreate an array in my component with the correct language and map in this array to display my texts.
So anytime I add or delete something in my translation file array it will be automatically added or deleted.

import en from "../../../../../messages/en.json"

export default function AdvantageAnimation() {
  const t = useTranslations("PortageSolution.advantages")

  const advantages = en.PortageSolution.advantages
  let paragraphIndex
  let paragraphs = []

  if (Array.isArray(advantages)) {
    for (let i = 0; i < advantages.length; i++) {
      paragraphIndex = i
      paragraphs.push({
        title: t.rich(`${paragraphIndex}.title`, {
          highlightBlue: (chunks) => <span className="highlightedBlue">{chunks}</span>,
        }),
        description: t(`${paragraphIndex}.description`),
      })
    }
  }
  
  return (
    <div className={styles.advantageContainer}>
      {paragraphs.map((paragraph, index) => (
          <div key={index}  className={styles.advantage}>
            <h3 className={styles.advantageTitle}>{paragraph.title}</h3>
            <p className={styles.advantageDescription}>{paragraph.description}</p>
          </div>
      ))}
    </div>
  )

[amannn]

That's actually an interesting idea, I think you could even clean that up a little bit with the useMessages hook. I've added a new expandable section to the arrays of messages section in 555fb37.

Thanks for sharing your idea! 🙌

[francisceril]

@amannn

I've seen the docs but it's actually not the same. What I'm trying to map is a nested object.

[amannn]

The trick is to move the array to your React component:

{
  "stats": {
    "years-of-service": {
      "title": "Years of service",
      "value": "34"
    },
    "happy-clients": {
      "title": "Happy clients",
      "value": "1000"
    },
    "partners": {
      "title": "Products",
      "value": "10000"
    },
    "employees": {
      "title": "Employees",
      "value": "100"
    },
    "offices": {
      "title": "Offices",
      "value": "5"
    }
  }
}

[
  'years-of-service',
  'happy-clients',
  'partners',
  'employees',
  'offices'
].map((key) =>
  <p key={key}>{t(`stats.${key}.title`)} ({t(`stats.${key}.value`)})</p>
)

Hope this helps!

[GaziRiad]

it's not really the same thing: here you have object containing objects, but we have array containg objects !!!

[amannn]

Can can create an array of keys from the messages, see #418 (reply in thread).

[francisceril]

Thank you. This works but how do I get rid of the typescript error?

[amannn]

Which error are you seeing?

[francisceril]

The error is on this line {t(`stats.${key}.title`)}

typescript: Argument of type '`stats.${key}.title`'  is not assignable to parameter of type MessageKeys<IntlMessages ...

[amannn]

I think I'd need a reproduction to look into that. If the array is defined as const (e.g. when it's defined inline, or explicitly via as const), this should work if the resulting keys are valid. Notably key should be 'years-of-service' | 'happy-clients' | … and not string.

[francisceril]

I'm not able to push to Github yet but basically here's my env.

node v18.17.0
"next-intl": "3.0.0-beta.9"
"next": "13.4.10"

en.json

{
"Stats": {
    "years-of-service": {
      "title": "Years of service",
      "value": "36",
      "suffix": "+"
    },
    "happy-clients": {
      "title": "Happy clients",
      "value": "3000",
      "suffix": "+"
    },
    "partners": {
      "title": "Company Partners",
      "value": "200",
      "suffix": "+"
    },
    "employees": {
      "title": "Professional Employees",
      "value": "100",
      "suffix": "+"
    },
    "offices": {
      "title": "Offices & Warehouses",
      "value": "5"
    }
}

stats.tsx

import { useTranslations } from "next-intl"

import Container from "@/components/ui/container"

export default function Stats() {
  const t = useTranslations("Stats")

  return (
    <Container className="grid lg:grid-cols-5">
      {keys.map((key) => (
        <div key={key}>
          <p>
            {t(`${key}.value`)}
            {key !== "offices" && <span>{t(`${key}.suffix`)}</span>}
          </p>
          <p>{t(`${key}.title`)}</p>
        </div>
      ))}
    </Container>
  )
}

const keys = [
  "years-of-service",
  "happy-clients",
  "partners",
  "employees",
  "offices",
]

Both this and above works but has TypeScript error commented above.

{['years-of-service', 'happy-clients', 'partners', 'employees', 'offices'].map((key) => (
        <div key={key}>
          <p>
            {t(`${key}.value`)}
            {key !== "offices" && <span>{t(`${key}.suffix`)}</span>}
          </p>
          <p>{t(`${key}.title`)}</p>
        </div>
      ))}

[amannn]

Can you try const keys = [ ... ] as const?

[william-dandrea]

For my part, I managed to get around the problem. It's not a very clean way, but it's got the merit of working.

My idea was to reproduce a "kind of array". I give each sub-object in a main object, and I myself give the length of this array ("length" attribute).

"items": {
  "length": "5",
  "0": {
    "title": "title 1"
  },
  "1": {
    "title": "title 2"
  },
  "2": {
    "title": "title 3"
  },
  "3": {
    "title": "title 4"
  },
  "4": {
    "title": "title 5"
  },
  "5": {
    "title":"title 6"
  }
}

After this, I can retrieve my "array" in my code as follows

Array.from(Array(Number(t(`items.length`))).keys()).map((item: number) => {
  // @ts-ignore
  return <YourElement key={item} label={t(`items.${item}.title`)} />
})

Not so clean, but working when you know what you are doing 😀

[amannn]

This could be interesting for you: #418 (reply in thread)

[denisemenov]

I understand that it's a little late, but there is an alternative solution for those who, like me, came across this topic and are looking for an answer to solve a problem where there is an array of objects. You just need to change the array a little and use raw.

{
  "stats": [
    {
      "id": "years-of-service",
      "title": "Years of service",
      "value": "34"
    },
    {
      "id": "happy-clients",
      "title": "Happy clients",
      "value": "1000"
    },
    {
      "id": "emplpartnersoyees",
      "title": "Products",
      "value": "10000"
    },
    {
      "id": "employees",
      "title": "Employees",
      "value": "100"
    },
    {
      "id": "offices",
      "title": "Offices",
      "value": "5"
    }
  ]
}

import { useTranslations } from 'next-intl';

export default function Stats() {
  const t = useTranslations();

  return (
    <div className='grid lg:grid-cols-5'>
      {t.raw('stats')?.map((i) => (
        <h2 key={i.id}>
          {i.title}: <span>{i.value}</span>
        </h2>
      ))}
    </div>
  );
}

[Deniffer]

Best way to solve the problem! thanks for help ! That is the best answer i want to use in next-intl!

[luobogor]

i like u, i like u!

[mtlaso]

This works, maybe consider adding a question mark in case map breaks:

// ...
{t.raw('stats')?.map((i) => (...)
// ...