es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo mapear datos JSON desde la API Strapi

28 Jul, 2023 Programación

Hola, estoy intentando obtener datos de la API Strapi y mostrarlos en el frontend de ReactJS. Estoy utilizando la biblioteca de axios.

Estos datos de ‘url’ son los que quiero obtener, pero siempre obtengo una respuesta indefinida o “Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘url’)”, como se muestra en la imagen.

Imagen JSON

Este es el código que uso para obtener los datos:

componentDidMount() {
    const url = "http://localhost:1337/videos";
    axios.get(url)
        .then(data_video => {
            console.log(data_video.data.video.url);
            this.setState({
                // data: data_video.data
            })
        })
}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar datos de la API en el frontend de ReactJS utilizando Axios, debes asegurarte de que el punto final de la API sea correcto y de que estás accediendo a los datos de manera adecuada. Al observar la captura de pantalla de la respuesta JSON, parece que los datos a los que intentas acceder están anidados dentro de la clave “video”.

    Puedes intentar actualizar tu código de la siguiente manera:

    componentDidMount() {

    const url = "http://localhost:1337/videos";

    axios.get(url)
        .then(response => {
            console.log(response.data[0].video.url); // asumiendo que la URL que deseas es para el primer video, puedes ajustar según sea necesario
            this.setState({
                data: response.data
            });
        })
        .catch(error => {
            console.log(error);
        });
}

    En este código actualizado, estamos accediendo a los datos utilizando response.data[0].video.url, ya que el objeto video está anidado dentro del arreglo. También hemos agregado un método .catch para registrar cualquier error que pueda ocurrir.

    Ten en cuenta que también debes renderizar los datos en tus componentes de React accediendo al estado data. Por ejemplo:

    render() {
    return (
        <div>
            {this.state.data && this.state.data.map(video => (
                <div key="{video.id}">
                    <h2>{video.title}</h2>
                    <video src="{video.video.url}" controls=""></video>
                </div>
            ))}
        </div>
    );
}

    Este código mapeará el estado data y renderizará un reproductor de video para cada video, mostrando el título y la URL. Observa el uso de && para evitar la renderización antes de que los datos se hayan cargado.

Comments are closed.