Vue.js consume json

Question

My problem is with this json. http://dev-rexolution.pantheonsite.io/api/noticias

I need to consume with vuejs 2 only the first element of the array to be able to display it, working with the console I worked but with no vuejs.

This console log work: console.log(response.data[0].title[0].value);

<template>
  <div class="Box Box--destacado1">
    <div class="Media Media--rev">
      <div class="Media-image">
          </div>
              <div class="Media-body">
                <span class="Box-info">{{ noticias[0].field_fecha[0].value}}</span>
                <h3 class="Box-title">
                 <a href="">{{ /*noticias[0].title[0].value */}}</a>
                </h3>
               <p class="Box-text">{{/*noticias[0].field_resumen[0].value*/}}</p>
              </div>
            </div>
</template>

<script>
import axios from 'axios';

export default {
  data: () => ({
    noticias: [],
    errors: []
  }),

  // Fetches posts when the component is created.
  created() {
    axios.get(`http://dev-rexolution.pantheonsite.io/api/noticias`)
    .then(response => {
      // JSON responses are automatically parsed.
      this.noticias = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

What exactly do you mean by "not working"? Also, why use a string template literal for your URL? — Phil
– Phil, Commented Aug 18, 2017 at 0:19
A quick look in your browser's Console and Network dev tools should show up any problems you might be running into — Phil
– Phil, Commented Aug 18, 2017 at 0:27
This template is generate by Drupal 8 module Rest. Not work because it returns objects as undefined — Fabián
– Fabián, Commented Aug 18, 2017 at 0:28
You're going to have to be clearer than that; "returns objects as undefined" where? Which piece of code causes the error? Provided you're web app is running on http://localhost:8080, this should work for you — Phil
– Phil, Commented Aug 18, 2017 at 0:34
This piece of code not work in access to json elements. {{ noticias[0].field_fecha[0].value}} — Fabián
– Fabián, Commented Aug 18, 2017 at 0:37

Phil · Accepted Answer · 2017-08-18 00:41:51Z

1

You're probably running into an issue where your template is attempting to show data that doesn't exist until the AJAX request has completed.

I would set a flag to indicate when the data is available and toggle the display using v-if. For example

Template

<div class="Media-body" v-if="loaded">

Script

data () {
  loaded: false,
  noticias: [],
  errors: []
}

and in your created hook

.then(response => {
  this.loaded = true
  this.noticias = response.data
})

Alternatively, set up your initial noticias array with some dummy data

noticias: [{
  title: [{ value: null }]
  field_fecha: [{ value: null }]
  field_resumen: [{ value: null }]
}]

answered Aug 18, 2017 at 0:41

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Phil Over a year ago

Sorry @Fabián, I don't understand your question

Phil Over a year ago

@Fabián the problem was, your template was attempting to access data in a very specific structure. When noticias was just an empty array, you were getting errors. If you make it at least structurally like what your template expects, it won't have errors

Fabián Over a year ago

Woow, Thanks @Phil

Collectives™ on Stack Overflow

Vue.js consume json

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related