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
A quick look in your browser's Console and Network dev tools should show up any problems you might be running into — Phil
This template is generate by Drupal 8 module Rest. Not work because it returns objects as undefined — Fabián
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
This piece of code not work in access to json elements. {{ noticias[0].field_fecha[0].value}} — Fabián

Phil Phil · Accepted Answer · 2017-08-18T00:41:51

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 }]
}]

Vue.js consume json

1 Answers