PHP API WITH VUE.JS

Question

I Created my API with PHP and here is the link: https://monstajams.co/streaming/rest/api/album/read.php

But anytime i put it in my Vue.js (Home.vue) file using axios No data is displayed on the front-end.

Here is my code below:

<ul class="ta-track-list" v-if="faqs && faqs.length">
        <li class="ta-track-card column col-2 flex-column" v-for="faq of faqs">
            <div class="inner">
                <div class="artwork" role="link">
                    <span role="link" style="background-image: url(http://localhost/mymusic/assets/images/artwork/Wizkid-Soco.jpg);">

                    </span>
                        <div class="hover flex align-center justify-center">
                            <button id="webutton" class="ta-secondary play" onclick='playSong()'>
                                <i class="material-icons">play_arrow</i>
                            </button>
                        </div>
                </div>
                    <div class="info">
                        <div class="title white-primary-hover" role="lin">{{ faqs }}</div>  
                        <div class="username light-white-hover" role="link">{{ faq.artist }}</div>  
                        <div class="released">{{ faq.duration }}</div>
                    </div>  
            </div>
        </li>
    </ul>


<script>
import axios from 'axios';

export default {
    name: 'home',
    data: () =>({
        faqs: [],
        errors: []
    }),

    created() {
        axios.get('https://monstajams.co/streaming/rest/api/album/read')
        .then(response => {
            this.faqs = response.data;
        })
        .catch(e => {
            this.errors.push(e)
        })
    }
}
</script>

@darklightcode My header // Headers header('Access-Control-Allow-Origin: *'); header('Content-Type: application/json'); — naija, Oct 08 '18 at 09:26
@darklightcode Doesn't look like a CORS issue - https://codesandbox.io/s/942698vlnw?expanddevtools=1&module=%2Fsrc%2Fcomponents%2FHelloWorld.vue — Alex Mulchinock, Oct 08 '18 at 09:28
@naija `Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"` , add this too, maybe some preflight OPTIONS are sent during the request. Any aditional httpStatus, logging might help if you got any — darklightcode, Oct 08 '18 at 09:28
@AlexMulchinock yes, i've just seen the headers from the request, no CORS indeed. — darklightcode, Oct 08 '18 at 09:30
@naija - to ask a silly question; are you actually outputting the data in your template anywhere? Your code works (see the example link I posted above). Can we see your template structure? — Alex Mulchinock, Oct 08 '18 at 09:32
I could access the JSON from this fiddle https://jsfiddle.net/epfyv9nw/ and even with your code. Are you sure `created()` gets called ? that `data` method doesn't seem to do much either ( if you plan on populating faqs ). Show us more code, the context where you are calling the request — darklightcode, Oct 08 '18 at 09:37

score 0 · Accepted Answer · answered Oct 08 '18 at 16:28

The problem is your code incorrectly assumes axios.get() resolves to the raw response, but it actually resolves to a response wrapper, where the raw response is contained in a data subproperty of the wrapper, which coincidentally has the same name as the target property within the response.

You can either change your Axios response handler to get the inner data field:

axios.get('https://monstajams.co/streaming/rest/api/album/read')
     .then(response => {
       // this.faqs = response.data; // response.data is the raw response, but you need the array within the response (also named "data")
       this.faqs = response.data.data;
     })

demo

Or leave your frontend alone, and update your PHP backend to send only the array in the response:

// FROM THIS RESPONSE:
{
  data: [/* PLAYLIST DATA */]
}

// TO THIS RESPONSE:
[/* PLAYLIST DATA */]

score -1 · Answer 2 · edited Jul 16 '22 at 04:09

-1

You are not updating your data accordingly to Vue docs.

For reactive changes see this document.

In the example below i update my list before Vue is mounted so rendering can occur accordingly.

let vm = new Vue({
  el: "#app",
  data: {
    todos: []
  },
  methods: {
    updateList() {

      axios.get('https://monstajams.co/streaming/rest/api/album/read')
        .then(res => {

          res.data.data.forEach(item => {

            Vue.set(vm.todos, vm.todos.length, {
              text: item.title,
              done: true
            })

          })

        })

    }
  },
  beforeMount() {
    this.updateList()
  },
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <span>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

edited Jul 16 '22 at 04:09

tony19

125,647
18
229
307

answered Oct 08 '18 at 11:02

darklightcode

2,738
1
14
17

@downvoter please explain on how my answer was inadequate and deserved a downvote – darklightcode Oct 08 '18 at 11:05
In the `beforeMount` method i trigger `this.updateList` method that updates `todo` list before the rendering occurs. It's basically your code, i just used `beforeMount` instead of `created`, see the vue docs for additional info and this post for a quick read https://stackoverflow.com/questions/40714319/how-to-call-a-vue-js-function-on-page-load/40714462 , please revise your vote, stackoverflow is not about fixing your code, it's about pointing you in the right direction. – darklightcode Oct 08 '18 at 11:41
I'm *guessing* this answer was downvoted because (1) it claims `Vue.set` is required to fix the OP's problem (*but that's not true, and the root problem is actually something else*), and (2) it drastically changes the context of the API data (from playlist to todo list), which can be confusing to readers. – tony19 Oct 08 '18 at 16:11

PHP API WITH VUE.JS

2 Answers2