All the texts for my app are inside a .json file for translation purposes. I need a function to get the corresponding text based on the selected language.

I think it should be an easy task, but I don't see the solution.

I have the following object:

{
  section1: {
    btn: { en: "English", es: "Español" },
    title: {
      en: "Web Frontend Developer",
      es: "Desarrollador Web de Frontend"
    },
    card: {
      title: { en: "Hello!", es: "Hola!" },
      btn: { en: "Get started", es: "Empecemos" },
    }
  }
}

This object should be passed to a function as the first parameter and the second parameter should be the language (in this case "en" or "es"). I want something like this: filterObjByLanguage(obj, "es")

And it should return:

{
  section1: {
    btn: "Español",
    title: "Desarrollador Web de Frontend",
    card: {
      title: "Hola!",
      btn: "Empecemos"
    }
  }
}

Basically, it goes through each part of the object and wherever there is a { en:"text", es: "texto" }, it chooses one of them based on the second parameter.

This is my attempt, but only the first layer of the object is returned correctly, the rest is undefined.

const filterObjByLanguage= (obj: any, lang: string): any => {
  const output = Object.assign(obj, {});

  const loop = (obj: any, isRoot: boolean = true): any => {
    for (var k in obj) {
      const value = output[k];
      const valueAtSelected = value?.[lang];

      if (typeof value === "string") {
        continue;
      } else if (valueAtSelected) {
        if (isRoot) output[k] = valueAtSelected;
        else return valueAtSelected;
      } else {
        if (isRoot) output[k] = loop(value, false);
        else return loop(value, false);
      }
    }
  };

  loop(output);

  return output;
};