My goal is to sort and array depending on its defined position. It has to compare an id and if it exists, then return it in a new array with its component. So far I am very stuck with this algorithm

    const forms: FormsToLocale = {
        ["ja"]: [
            { componentId: "email", position: 1 },
            { componentId: "title", position: 2 },
            { componentId: "japanName", position: 3 },
            { componentId: "phoneNumber", position: 4 },
        ],
        ["en-HK" || "en-MO"]: [
            { componentId: "email", position: 1 },
            { componentId: "verificationCode", position: 2 },
            { componentId: "title", position: 3 },
            { componentId: "firstName", position: 4 },
            { componentId: "lastName", position: 5 },
        ],
        default: [
            { componentId: "email", position: 1 },
            { componentId: "title", position: 2 },
            { componentId: "firstName", position: 3 },
            { componentId: "lastName", position: 4 },
            { componentId: "phoneNumber", position: 5 },
        ],
    };

    const componentsFormMapping: ComponentFormMapping[] = [
        { componentId: "email", component: "EmailLightAccountComponent" },
        { componentId: "title", component: "TitleLightAccountComponent" },
        { componentId: "firstName", component: "FirstnameLightAccountComponent" },
        { componentId: "lastName", component: "LastnameLightAccountComponent" },
        { componentId: "japanName", component: "JapanNameLightAccountComponent" },
        { componentId: "phoneNumber", component: "PhoneLightAccountComponent" },
        { componentId: "verificationCode", component: "SendCodeComponent" },
    ];

    const createForm = () => {
      const japanForm = forms["ja"];
      japanForm.map((componentF) => {
        console.log(componentsFormMapping.find((component) => componentF.componentId === component.componentId)!.component);
      })
    }

    createForm();

expected output: ["EmailLightAccountComponent", "TitleLightAccountComponent", "JapanNameLightAccountComponent", "PhoneLightAccountComponent"]

Thanks for your help

CodePudding user response：

You could change the data a bit and map the corresponding components.

const
    forms = {
        ja: ["email", "title", "japanName", "phoneNumber"],
        "en-HK": ["email", "verificationCode", "title", "firstName", "lastName"],
        default: ["email", "title", "firstName", "lastName", "phoneNumber"]
    },
    components = {
        email: "EmailLightAccountComponent",
        title: "TitleLightAccountComponent",
        firstName: "FirstnameLightAccountComponent",
        lastName: "LastnameLightAccountComponent",
        japanName: "JapanNameLightAccountComponent",
        phoneNumber: "PhoneLightAccountComponent",
        verificationCode: "SendCodeComponent"
    },
    createForm = type => forms[type].map(componentId => ({ componentId,  component: components[componentId] }));

forms["en-MO"] = forms["en-HK"];

console.log(createForm("ja"));

.as-console-wrapper { max-height: 100% !important; top: 0; }

CodePudding user response：

If yout types were optimized for this task, this would be just

const forms = {
  ja: [
    "email",
    "title",
    "japanName",
    "phoneNumber",
  ],
  "en-HK": [
    "email",
    "verificationCode",
    "title",
    "firstName",
    "lastName",
  ],
  get "en-MO"() { return this['en-HK'] },
  "default": [
    "email",
    "title",
    "firstName",
    "lastName",
    "phoneNumber",
  ],
} as const;

const componentsFormMapping = {
  "email": "EmailLightAccountComponent",
  "title": "TitleLightAccountComponent",
  "firstName": "FirstnameLightAccountComponent",
  "lastName": "LastnameLightAccountComponent",
  "japanName": "JapanNameLightAccountComponent",
  "phoneNumber": "PhoneLightAccountComponent",
  "verificationCode": "SendCodeComponent",
} as const;

function createForm(lang: keyof typeof forms) {
  return forms[lang].map(e => componentsFormMapping[e])
}

Is there a reason for using the provided types? If yes, then explain it, so I can write for your use-case.

Anyways, the solution is

function createForm(lang: keyof typeof forms) {
  return forms[lang]
    .sort((a, b) => a.position - b.position)
    .map(e => componentsFormMapping
      .find(c => c.componentId == e.componentId)!.component)
}