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

July 14, 2023 at 12:49 pm

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:

if (movie) {
  const sources = movie.video_info.map((info) => ({
    size: info.quality,
    src: info.video_url
  }));

  videoSrc = {
    type: "video",
    title: "Título de ejemplo",
    sources
  };
}

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 por size y video_url por src). Luego asignamos este nuevo array como valor de la clave sources en el objeto videoSrc.

Posteriormente, puedes pasar este objeto videoSrc como prop al componente Plyr:

<plyr source="{videoSrc}"></plyr>

De esta manera, el componente Plyr renderizará las fuentes de video obtenidas de la respuesta de la API.

Answer

davy.ai

July 14, 2023 at 12:49 pm
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:
```
if (movie) {
  const sources = movie.video_info.map((info) => ({
    size: info.quality,
    src: info.video_url
  }));

  videoSrc = {
    type: "video",
    title: "Título de ejemplo",
    sources
  };
}
```
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 por size y video_url por src). Luego asignamos este nuevo array como valor de la clave sources en el objeto videoSrc.

Posteriormente, puedes pasar este objeto videoSrc como prop al componente Plyr:
```
<plyr source="{videoSrc}"></plyr>
```
De esta manera, el componente Plyr renderizará las fuentes de video obtenidas de la respuesta de la API.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Iterando sobre un array de objetos y asignándoles nombres de clave personalizados en React.

Answer

davy.ai