Next-intl gets the specified array object

Question

My message/en.json looks like this

{
  "items": [{
    "name: "item 1",
    "price: "100",
  }, {
    "name: "item 2",
    "price: "200",
  }]
}

My page.tsx

import { useTranslations } from 'next-intl';

export default function ProductSection() {
  const t = useTranslations() as any;

  return <>{t('items[0].price')}</>;
}

Also tried

import { useTranslations } from 'next-intl';

export default function ProductSection() {
  const t = useTranslations('items') as any;

  return <>{t('[0].price')}</>;
}

I tried above method but get the error message:

IntlError: MISSING_MESSAGE: Could not resolve `items[0].price` in messages for locale `en`.

There is a method on the Internet to map the array object and then loop, but it is not what I want. I don’t need to loop for the time being, I just need to get the item I need.

Fradven · Accepted Answer · 2024-07-18 14:32:53Z

2

Here's how you can loop through and array and get the messages you need github:

{
"items": {
    "item-1": {
      "title": "Item 1",
      "value": "34"
    },
    "item-2": {
      "title": "Item 2",
      "value": "1000"
    },
    "item-3": {
      "title": "Item 3",
      "value": "10000"
    },
    "item-4": {
      "title": "Item 4",
      "value": "100"
    },
    "item-5": {
      "title": "Item 5",
      "value": "5"
    }
  }
}

And you can create an array with the different keys:

[
  'item-1',
  'item-2',
  'item-3',
  'item-4',
  'item-5'
].map((key) =>
  <p key={key}>{t(`items.${key}.title`)} ({t(`items.${key}.value`)})</p>
)

edited Jul 18, 2024 at 14:32

answered Jul 16, 2024 at 7:24

Fradven

687 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

aboutjquery Over a year ago

I just edited my question and provide full code and error message, thanks.

Fradven Over a year ago

Is there a particular reason for you to do it with an array inside of "items"? Otherwise I'd recommend structuring you json like this solution form github. It's going to be much easier to get a specific item like this and you can still make a loop later on if needed

aboutjquery Over a year ago

I just want to conveniently loop when needed and maintain my commonly used format. I found that the message method of array object is not mentioned in the doc. Is this not recommended by next-intl? thanks.

Fradven Over a year ago

I t's not recommended no, at least as far as I know. I changed my answer to show what I think is the best solution for you, hope that helps

Collectives™ on Stack Overflow

Next-intl gets the specified array object

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related