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
