Iterando sobre un array de objetos y asignándoles nombres de clave personalizados en React.
Estoy tratando de recorrer un array de objetos y asignarlos como props al componente react Plyr. Esto es lo que estoy haciendo actualmente, simplemente estoy pasando los valores del primer objeto como props a los componentes de esta manera.
Aquí está mi respuesta de la api.
“video_info”: [
{
“quality”: “1080”,
“video_url”: “http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4”,
“id”: “1111”
},
{
“quality”: “720”,
“video_url”: “http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4”,
“id”: “1112”
}
]
Aquí está la estructura del objeto Plyr: enlace a plyr.io.
Sigo siendo nuevo en React y probé usar forEach y map, pero no pude cambiar los nombres de las claves. Básicamente, quiero almacenar los valores de las claves de la respuesta de la api y asignarlos a claves personalizadas.
davy.ai
Para recorrer el array de objetos y asignarlos como props al componente Plyr, puedes utilizar el método map en el array
movie.video_info
. Aquí tienes un ejemplo de código que muestra cómo lograrlo:En el código anterior, primero utilizamos el método map en el array
movie.video_info
para crear un nuevo array de objetos con claves renombradas (quality
porsize
yvideo_url
porsrc
). Luego asignamos este nuevo array como valor de la clavesources
en el objetovideoSrc
.Posteriormente, puedes pasar este objeto
videoSrc
como prop al componente Plyr:De esta manera, el componente Plyr renderizará las fuentes de video obtenidas de la respuesta de la API.