如何通过Vue中的axios获取json对象？

Question

I'm trying to fetch an object from JSON generated on wordpress endpoint. My initial goal is to display images from custom fields in wordpress on the vue app I'm building for a client.

Right now I'm just trying to test to see if I can fetch specific object, and then I will continue to fetch a specific image url.

How can I fetch the "acf" object in json?

Should i instead filter the data to only show the object of interest, what would be the best practice to continue with here?

The code I've written works, and it fetches the json. However, I'm trying to only fetch the specific object "acf" in: https://backend.rogalandtt.no/wp-json/markers/v1/post .

by changing the response to "res.data" it fetches it. The way I understand it would be to add "res.data.acf" to fetch the object, but it returns undefined.

    <template>
      <div id="app">
        {{ images }}
      </div>
    </template>
    <script>
    import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'

    export default {
      data: () => ({
        markers: null,
        id: null,
        images: []
      }),
      async mounted () {
        axios
          .get('https://backend.rogalandtt.no/wp-json/markers/v1/post')
          .then(res => {
            (this.images = res.data /* Adding .acf shows undefined */)
            console.log(this.images)
          })
      }
    }
    </script>

In console log it just shows up as undefined.

Answer 1

I figured this out by using stringify and type of. Stringify such as JSON.stringify(MyResponseValue.data.someOtherValue) , or using type of such as response.data[0].MyOtherValue to define a specific object I am trying to fetch from a Json schema.