javascript: es posible acceder a una colección de datos dentro de un objeto JSON como este, por ejemplo. object1.object2.id usan

CorePress2024-01-25  13

Estoy intentando obtener la identificación usando un objeto JSON:

"object1":
[
{"name":"Station A","cycleTime":5,"object2":{"id":"60","time":032820200122}}
],

este objeto se ejecuta en un servidor json en Visual Studio Code

Código Vue.js:

<template>

<div>

    <div v-for="object1 in stations" :key="object1">
      
        <h1>{{object1.object2.id}}</h1> 
        
    </div>

</div>


</template>

<script>

export default {
    
    name: 'app',

    data() {
        return {
            stations: [],
            
        }
    },

    mounted() {

        fetch("http://localhost:8000/station")
            .then(res => res.json())
            .then(data => this.station = data)
            .catch(err => console.log(err.message))
    },
    

    }

</script>

Estoy intentando obtener los datos de identificación del segundo objeto, pero cuando ejecuto el servidor json en el colmenar de la consola aparece el siguiente error

TypeError: No se puede leer la propiedad 'id' de null



------------------------------------

Asegúrese de que todos los nombres de las variables sean correctos en su fragmento de código
<template>
    <ul id="example-2">
        <li v-for="(item, index) in stations" :key="index">
            <h1>{{item.object2.id}}</h1>
        </li>
    </ul>
</template>
<script>
export default {
    name: 'app',
    data () {
        return {
            stations: [
                {
                    name: 'Station A',
                    cycleTime: 5,
                    object2: {
                        id: '60',
                        time: 032820200122
                    }
                }
            ]
        }
    },
    mounted () {
        // please make sure after the api call value is assigned to this.stations
        // also the response should have similar structure to the above initial structure
    }
}
</script>

3

Gracias por la recomendación, ¿es posible hacer esto con la etiqueta div?

Fernán Ruiz

28/03/2021 a las 21:16

Funciona, por lo que para que el compilador pueda leer los datos necesitamos hacer una sangría. ¿Qué sucede si intento convertir esto como una API a través de Internet?

Fernán Ruiz

28/03/2021 a las 21:25

Sí, puedes usar <div> etiqueta en lugar de <ul><li>. No arroja ningún error por eso. Pero siempre es una buena práctica utilizar <ul><li> con v-for.

-Abhisek Dutta

30 de marzo de 2021 a las 6:52



------------------------------------

El error está en la siguiente función: Estás usando esta.estación

mounted() {

        fetch("http://localhost:8000/station")
            .then(res => res.json())
            .then(data => this.station = data)
            .catch(err => console.log(err.message))
    },

Pero su conjunto de datos son estaciones. Este es un error tipográfico. Por favor usa esto

mounted() {

        fetch("http://localhost:8000/station")
            .then(res => res.json())
            .then(data => this.stations = data)
            .catch(err => console.log(err.message))
    },

1

Gracias, corregí el error, gracias por eso. Sigue mostrando el mismo error: TypeError: No se puede leer la propiedad 'id' de nulo.

Fernán Ruiz

28/03/2021 a las 21:18

Su guía para un futuro mejor - libreflare
Su guía para un futuro mejor - libreflare