Convierta una respuesta JSON extraña en una matriz de objetos simples

Question

Estoy tratando de convertir la siguiente respuesta JSON a un formato específico para usar en un cuadro desplegable:

{
"breeds": [
    {
        "name": "Affenpinscher",
        "_links": {
            "type": {
                "href": "/v2/types/dog"
            }
        }
    },
    {
        "name": "Afghan Hound",
        "_links": {
            "type": {
                "href": "/v2/types/dog"
            }
        }
    },
    {
        "name": "Airedale Terrier",
        "_links": {
            "type": {
                "href": "/v2/types/dog"
            }
        }
    },
    {
        "name": "Akbash",
        "_links": {
            "type": {
                "href": "/v2/types/dog"
            }
        }
    },
]}

Para usarse en el cuadro desplegable, los datos deben ajustarse a esta sintaxis:

items={[
            {
              label: "Baby",
              value: "Baby",
            },
            {
              label: "Young",
              value: "Young",
            },
            {
              label: "Adult",
              value: "Adult",
            },
            {
              label: "Senior",
              value: "Senior",
            },
          ]}

Donde tanto las etiquetas como los valores serían iguales al campo "nombre" en el objeto JSON, es decir:

[{
      label: "Afghan Hound",
      value: "Afghan Hound",
 },
]

He intentado aparentemente todas las herramientas de refactorización de objetos y matrices disponibles en JS, pero no creo que lo esté haciendo correctamente. Toda ayuda es muy apreciada.

javascript json reactjs react-native

1

Cameron Hammel 16 ago. 2020 a las 05:55

Answer 1

¡Un simple Array map debería funcionar!

const labels = response.breeds.map(breed => {
  return {
    label: breed.name,
    value: breed.name
  }
})

Véalo en acción a continuación:

const response = {
"breeds": [
    {
        "name": "Affenpinscher",
        "_links": {
            "type": {
                "href": "/v2/types/dog"
            }
        }
    },
    {
        "name": "Afghan Hound",
        "_links": {
            "type": {
                "href": "/v2/types/dog"
            }
        }
    },
    {
        "name": "Airedale Terrier",
        "_links": {
            "type": {
                "href": "/v2/types/dog"
            }
        }
    },
    {
        "name": "Akbash",
        "_links": {
            "type": {
                "href": "/v2/types/dog"
            }
        }
    },
]}

const labels = response.breeds.map(breed => {
  return {
    label: breed.name,
    value: breed.name
  }
})

console.log(labels);

0

Nick 16 ago. 2020 a las 03:03

Answer 2

Esto ya fue respondido, pero puede resultarle útil implementar una función en caso de que necesite repetir este tipo de lógica varias veces.

const convertJson = (response) => response.breeds.map((breed) => ({ label: breed.name, value: breed.name }));

0

N-bred 16 ago. 2020 a las 03:19

Convierta una respuesta JSON extraña en una matriz de objetos simples

2 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript