Convert response.data.data from api to a structured object vue js

Question

so I'm using vue-meta library to add meta tag to my vue project, and now I'm trying to add my meta from API response, this is what i got from API if i did console.log('response.data.data')

0:
meta_tags_content: "my content"
meta_tags_id: 3
meta_tags_properties: "my property"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get meta_tags_content: ƒ reactiveGetter()
set meta_tags_content: ƒ reactiveSetter(newVal)
get meta_tags_id: ƒ reactiveGetter()
set meta_tags_id: ƒ reactiveSetter(newVal)
get meta_tags_properties: ƒ reactiveGetter()
set meta_tags_properties: ƒ reactiveSetter(newVal)
__proto__: Object
1:
meta_tags_content: "content"
meta_tags_id: 4
meta_tags_properties: "title"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get meta_tags_content: ƒ reactiveGetter()
set meta_tags_content: ƒ reactiveSetter(newVal)
get meta_tags_id: ƒ reactiveGetter()
set meta_tags_id: ƒ reactiveSetter(newVal)
get meta_tags_properties: ƒ reactiveGetter()
set meta_tags_properties: ƒ reactiveSetter(newVal)
__proto__: Object
length: 2

I'm trying to add the meta_tags_content and meta_tags_properties to my vue meta tag function (https://www.npmjs.com/package/vue-meta), this is my meta tag function

export default {
  name: 'App',
  metaInfo () {
    return {
      title: 'Tiarapot',
      meta: [
        {
          name: 'description',
          content: 'Memang canggih (harus ganti)'
        },
        {
          property: 'og:title',
          content: 'Website Tiarapot (harus ganti)'
        },
        {
          property: 'og:site-name',
          content: 'Tiarapot'
        },
        {
          property: 'og:type',
          content: 'website'
        },
        {
          name: 'robots',
          content: 'index,follow'
        }
      ]
    }
  },
}

and what I'm trying to do is to make it like this

export default {
  name: 'App',
  metaInfo () {
    return {
      title: 'Tiarapot',
      meta: arrayOfConvertedresponse
    }
  },
}

how to convert those response of array to a meta structured object ?

expected result if i console.log(arrayOfConvertedresponse) is

[
    {
    property: "my properties",
    content: "my content"
    },
    {
    property: "title",
    content: "content"
    }
]

What you've logged at the top of your question appears to be a Vue observable. Could you please log the structure of the data as it is received from your API? Something like console.log(JSON.stringify(response.data, null, 2)) should look nicer — Phil
– Phil, Commented Apr 23, 2021 at 1:04
Your meta contains both name and property as attributes. So do you want a solution that just tells you about the property name to put? Like name for normal tag and property for Open Graph in your case? — KeitelDOG
– KeitelDOG, Commented Apr 23, 2021 at 1:48

Phil · Accepted Answer · 2021-04-23 01:16:58Z

1

If you want to use responsive data in metaInfo, you'll need to assign the array to a data property and refer to it in the metaInfo function

export default {
  name: 'App',
  data: () => ({
    arrayOfConvertedresponse: [] // define initial properties
  }),
  metaInfo () {
    return {
      title: 'Tiarapot',
      meta: this.arrayOfConvertedresponse
    }
  },
  async created () {
    // load data from the API
    const response = await axios.get("/api/meta-tags")

    // map response to the appropriate format and assign to your data property
    this.arrayOfConvertedresponse = response.data.data.map(meta => ({
      property: meta.meta_tags_properties,
      content: meta.meta_tags_content
    }))
  }
}

See https://vue-meta.nuxtjs.org/faq/async-action.html

answered Apr 23, 2021 at 1:16

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Collectives™ on Stack Overflow

Convert response.data.data from api to a structured object vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related