String com notação de ponto para objeto aninhado

Jan 12 2023
Uma coisa útil que podemos implementar para criar objetos. Casos de uso Formatação do objeto de acordo com a estrutura desejada.
transformar string com notação de ponto em objeto aninhado

Uma coisa útil que podemos implementar para criar objetos.

Casos de uso

Formatando o objeto de acordo com a estrutura desejada.

O que isso significa na prática? Durante o trabalho, frequentemente encontramos solicitações de colegas para enviar dados do formulário em um formato específico. Por exemplo, a propriedade firstName e a propriedade lastName são um objeto dentro da propriedade da pessoa.

const formData = {
  firstName: "John",
  lastName: "Doe"
}

const formData = {
  person: {
    firstName: "John",
    lastName: "Doe"
  }
}

Solução

const setPropertyByPath = (
  obj: object,
  path: string,
  value: FieldValue,
): object => {

  const [head, ...rest] = path.split('.');

  return {
    ...obj,
    [head]: rest.length
      ? setPropertyByPath(obj[head as keyof object], rest.join('.'), value)
      : value,
  };
};

  • path — nosso caminho coletado do campo de formulário ex “person.firstName”, “person.address.city” ou apenas “hobbies”. Com ou sem notação de ponto.
  • [head, …rest] — dividimos a string e pegamos o primeiro item do array e o resto dele. A primeira cabeça é uma propriedade como as outras. Verificando se o restante contém mais itens, chamamos a recursão ao último. Quando chegamos ao último, atribuímos um valor a ele.