How to map through objects and arrays in translations

Question

I have 2 JSON files with my translation data -> EN file and FR file.

I am using react-i18next to handle my translations this way, which works fine, but since I am having repeatable components I need to map/loop through the translations to get the right output

Example

en:

export const EN = {
    page1: {
      section1 {
         titles: {
            title1: "title1_name",
            title2: "title2_name",
            title3: "title3_name"
          },
          buttons: {
             button1 : "button1_name",
             button2 : "button2_name",
             button3 : "button3_name",
          }
       }
       section2 { THE SAME AS SECTION 1 }
       section3 { THE SAME AS SECTION 1 }

    page2 { SAME AS PAGE 1 } 

The same thing applies for FR file (with french translations instead)

How can achieve to mapping all e.g titles from section1 and page1. Would that be even correct to use map() ?

Right now my solution is just to use {t page1.section1.0.titles.title1} which of course print the same title everywhere - in this case title1_name

Current Output with using {t page1.section1.0.titles.title1} :

slider1: title1_name

slider2: title1_name

slider3: title1_name

slider4: title1_name and so on so on...

Expected output:

slider1: title1_name, button1_name

slider2: title2_name, button2_name

slider3: title4_name, button3_name

slider4: title4_name, button4_name

Answer 1

This works, you'll need to do the translation, but this gives you access to the title object in each page and section:

    Object.entries(EN).map(([key,object]) => {

      Object.entries(object).map(([token, value]) => {
          console.log(`${token} : ${value}`);
          Object.keys(value).map((key, index) => {
            console.log(value[key]); // titles access here
        });
      });
    });

Answer 2

When you are iterating over an object you'll want to use a function that gets data from your object in an array. Traditionally that is Object.keys(), but newer versions of Javascript introduced Object.values() and Object.entries() which can be very helpful depending on the situation. You can access a value from its key like myObject[myKey] so Object.keys() can work in every situation.

The current structure of your JSON file is not ideal because you have totally separate objects for titles and buttons so you can't ensure that you have the same amount of title texts as button texts. I'll address this in a moment, but first here is one way that you can use the current structure.

const MySlider = () => {
  const currentlang = ... // get the EN or FR object based on your current language

  // an array of all the title texts
  const titles = Object.values(currentlang.page1.section1.titles);

  // an array of all the button texts
  const buttons = Object.values(currentlang.page1.section1.buttons);

  return (
    <Slider>
      {titles.map((title, i) => ( // map through the titles
        <Slide
          title={title}
          buttonText={buttons[i]} // get the button text with the same index -- how do we know this is valid?
          key={i} // i as a key is not great
        />
      ))}
    </Slider>
  );
};

With some dummy components so that you can render it:

const Slider: React.FC = ({ children }) => <div>{children}</div>;

interface SliderProps {
  title: string;
  buttonText: string;
}

const Slide: React.FC<SliderProps> = ({ title, buttonText }) => {
  return (
    <div>
      <h2>{title}</h2>
      <button>{buttonText}</button>
    </div>
  );
};

I would recommend grouping the labels by slide rather than by titles and buttons. This ensures that titles and buttons match up, allows easy access by the slide key if you want to customize the order, and gives us a unique key property for our components.

export const EN = {
  page1: {
    section1: {
      slides: {
        sale: {
          title: "title1_name",
          button: "button1_name"
        },
        featured: {
          title: "title2_name",
          button: "button2_name"
        },
        promo: {
          title: "title3_name",
          button: "button3_name"
        },
      }
    }
  }
};

const MySlider = () => {
  const currentlang = ... // get the EN or FR object based on your current language

  // keyed object of slides
  const slides = currentlang.page1.section1.slides;

  return (
    <Slider>
      {Object.entries(slides).map(
        // Object.entries gives us an array with elements key and value
        ([key, value]) => (
          <Slide
            title={value.title}
            buttonText={value.button}
            key={key}
          />
        )
      )}
    </Slider>
  );
};

Key-based approach to allow custom ordering:

const MySlider = () => {
  const currentlang = ... // get the EN or FR object based on your current language

  // keyed object of slides
  const slides = currentlang.page1.section1.slides;

  // helper function renders the slide for a given key
  const renderSlide = (key: keyof typeof slides) => {
    const {title, button} = slides[key];
    return (
      <Slide 
        title={title}
        buttonText={button}
      />
    )
  }

  return (
    <Slider>
      {renderSlide("promo")}
      {renderSlide("sale")}
      {renderSlide("featured")}
    </Slider>
  );
};

Answer 3

There is no option for a .map functions on objects but you can use the Object.keys Option.:

var myObject = { 'a': 1, 'b': 2, 'c': 3 };

Object.keys(myObject).map(function(key, index) {
  myObject[key] *= 2;
});

console.log(myObject);
// => { 'a': 2, 'b': 4, 'c': 6 }

map function for objects (instead of arrays)

Medium MultiLanguage Website