4

Queria saber se existe alguma forma de mapear objetos json em react-native. Por exemplo, digamos que eu receba o seguinte json:

{
    "data": {
        "lastUpdate": {
            "name": "Lala"
        }
        "dob": "01/01/2001"
    }
}

e eu queria mapear para um objeto:

{
    "dados": {
        "ultimaAtualizacao": {
            "nome": "Lala"
        }
        "nascimento": "01/01/2001"
    }
}

Considerando que isso venha de um fetch, seria possível fazê-lo da seguinte forma:

meuServico.get(url).then(resposta => this.mapeiaObjeto(resposta, []));

//Considerando que o state já está inicializado
//Considerando que eu já tenha uma entidadeMapeada pra retornar as propriedades corretas
mapeiaObjeto (objetoJson, propriedadePai) {
    for (let propriedade in objetoJson) {
        if (Array.isArray(objetoJson[propriedade ])) {
            mapeiaArray(objetoJson[propriedade], [...propriedadePai,propriedade]); //Seria algo análago a esse método
        } else if (typeof objetoJson[propriedade] === 'object') {
            this.mapeiaObjeto(objetoJson[propriedade],[...propriedadePai,propriedade]);
        } else {
            let prop = this.state;
            for(let chave of propriedadePai) {
              prop = prop[entidadeMapeada[chave]];
            }
            prop[entidadeMapeada[propriedade]] = objetoJson[propriedade];
        }
    }
}

Minha dúvida é, existe alguma forma mais simples, seja com algum framework ou com recursos próprios do react-native, de fazer isso?

2
  • 1
    como você vai saber qual propriedade mapear?
    – Vencovsky
    19/03/2019 às 13:24
  • @Vencovsky nesse meu código, o objeto entidadeMapeada guarda qual chave é correspondente a qual nome. Por exemplo, { "data": "dados", "dob": "nascimento"} por aí vai. No caso, eu queria saber se existe alguma forma de eu criar uma classe e ele já gerar o objeto pra mim de forma nativa no react, tipo annotations em java 19/03/2019 às 13:41

1 Resposta 1

5
+100

Usando o pacote deep-map-keys você pode alterar todas as chaves de um objeto recursivamente assim:

import deepMapKeys from "deep-map-keys";

let response = {
  data: {
    lastUpdate: {
      name: "Lala"
    },
    dob: "01/01/2001"
  }
};
let dictionary = {
  data: "dados",
  lastUpdate: "ultimaAtualizacao",
  name: "nome",
  dob: "nascimento"
};

let translatedKeys = deepMapKeys(response, key => {
  return dictionary[key];
});

console.log(translatedKeys);

Edit STACKOVERFLOW-PT/368716


"@MarceloRafael a ideia seria criar um modelo e quando eu recebesse o objeto json, ele já "injetar" os valores nesse objeto, basicamente... – Felipe Avelar"

Ficaria difícil para identificar qual valor vai em qual campo deste modelo que você falou.

Suponhamos o uso do deep-map

import deepMap from "deep-map"

let modelo = {
  usuarios: [
     //Cada objeto teria que ter <%- name1 %>, <%- name2 %>, etc.
     //O mesmo vale com o email e as ruas
    { nome: "<%- name %>", email: "<%- email %>" },
    { nome: "<%- name %>", email: "<%- email %>" },
    { nome: "<%- name %>", email: "<%- email %>" }
  ],
  ruas: [
    { rua: "<%- street %>", bairro: "<%- district %>" },
    { rua: "<%- street %>", bairro: "<%- district %>" }
  ]
}
let response = {
  users: [
     //aqui, cada chave teria que ter um nome de um modelo
     //name1, name2, etc. E o mesmo vale com os outros
    { name: "Marcelo", email: "[email protected]" },
    { name: "Jonas", email: "jon[email protected]" },
    { name: "Felipe", email: "[email protected]" },
  ],

}

Como você pode ver, teria que ter uma resposta previsível, pra você poder fazer a correspondência entre o modelo e a resposta.

Agora este exemplo mostra o modelo mais simples

let modelo = {
  usuarios: '<%- users %>',
  ruas: '<%- streets %>'
}
let response = {
  users: [
    { name: "Marcelo", email: "[email protected]" },
    { name: "Jonas", email: "[email protected]" },
    { name: "Felipe", email: "[email protected]" },
  ],
  streets: [
    { name: "Test1", district: "Hi"},
    { name: "Test2", district: "Hi2"},
  ]
}

Assim seria viável. Só que agora você teria que traduzir as chaves que foram passadas por inteiro, as que estavam dentro dos Arrays.

Se você for no google e pesquisar: javascript value annotation acho que não vai achar nada, mas se pesquisar: java value annotation, vai aparecer o @value do SpringBoot, que é o que eu acho que você está querendo.

12
  • Está biblioteca funciona no React Native?
    – sant0will
    20/03/2019 às 18:46
  • Eu uso apenas o React, testa aí, veja se funciona.
    – Marcelo
    20/03/2019 às 18:49
  • 1
    Funciona! Teste
    – sant0will
    20/03/2019 às 18:51
  • 1
    Se não for isso, tente alterar sua pergunta, porque lá você criou dois objetos, um em português e outro em inglês, e o objeto não mudou, logo se pensa que você quer traduzir as chaves. Coloque um exemplo melhor se possível, vlw.
    – Marcelo
    21/03/2019 às 11:14
  • 1
    @MarceloRafael, acho que me expressei mal no meu último comentário, o seu primeiro exemplo já está quase completo. A minha dúvida é se eu criaria um modelo que, quando eu passasse o response para a classe, ele já "construiria" o meu objeto, mas acredito que o primeiro exemplo já me atende. (: 21/03/2019 às 13:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .