Transforming the data retrieved from the API into a well-organized object in Vue.js

Currently, I am utilizing the vue-meta library to incorporate meta tags into my Vue project. What I'm attempting to do now is populate my meta tags using the API response data. Here's an example output from the API when I 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 aim to integrate the meta_tags_content and meta_tags_properties values into my Vue meta tag function (https://www.npmjs.com/package/vue-meta). Below is a snippet of 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'
        }
      ]
    }
  },
}

The goal is to modify it to resemble the desired structure below:

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

How can I convert the array response into a structured meta object?

If I log 'arrayOfConvertedresponse', the expected result should be:

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

Answer №1

If you wish to incorporate responsive data into the metaInfo section, you must set the array as a data property and reference it within the metaInfo function

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

    // transforming response to the required format and assigning it to the data property
    this.arrayOfConvertedresponse = response.data.data.map(meta => ({
      property: meta.meta_tags_properties,
      content: meta.meta_tags_content
    }))
  }
}

Refer to

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way for me to retrieve the widths of all child elements within an HTML document?

I have been working on a JavaScript (jQuery) function to calculate the maximum width of all child and children's-child elements within a specific div element. Here is the code I have written so far: function setBodyMinWidth(name){ var max = 0; $(nam ...

Automatically execute a function when the number input changes, but only if no further changes are detected after a certain period of time

I am implementing angularjs with an input field for numbers. I want to trigger an action automatically after a certain amount of time, but only if no further changes have been made to the number within that time frame (let's say 2 seconds). In my exa ...

Utilizing Angular 6 and JavaScript to invoke two functions within an (ngClick) event in both the Component and JavaScript

I have a requirement to execute two functions in my click event, one for my component and the other for a custom JavaScript function. Here is the code snippet: Angular click event: <button type="button" class="btn btn-primary" (click)="Plans(); " [att ...

Compose an email in Vue.js without relying on any third-party API integration

Looking to send emails via SMTP Protocol without relying on any third-party integrations or APIs. Please provide a detailed, step-by-step solution. No need for existing code reflection, just ensuring error-free execution. ...

"Troubleshooting issue: No response received when uploading files in VueJs3 with Laravel 8

Seeking assistance with a persistent issue that I have been unable to resolve despite trying various methods. Your help would be greatly appreciated. Below is my Vue template for creating categories: <form @submit.prevent="createCat" enctype= ...

How can an array be generated functionally using properties from an array of objects?

Here's the current implementation that is functioning as expected: let newList: any[] = []; for (let stuff of this.Stuff) { newList = newList.concat(stuff.food); } The "Stuff" array consists of objects where each ...

Invoking a REST API synchronously using JavaScript

I am just starting out with JavaScript and the npm ecosystem. I am attempting to upload data to my REST service using a POST call. The data is being fetched from a CSV file, which is going well so far. For each line of data that is fetched, I convert it as ...

Exploring the capabilities of data processing in Node.js

I've been attempting to read data from a locally stored JSON file, organize it into individual JS objects, and add them to a queue. However, I'm struggling to find a way to test my parsing function to ensure it's functioning correctly. My cu ...

Flickering issue with Chart.js chart persists upon reopening the page

Utilizing mustache.js, I am injecting a view file into a designated <div>. Within this view, I have incorporated a canvas element situated inside a specific div, showcasing a chart created with Chart.js. <div> <canvas id="gesundheitsve ...

Is there a way to position one DIV behind another?

Hey, I'm working on my first project and running into some trouble with divs. I'm trying to position the firework behind the central text but can't figure it out. Can anyone lend a hand? I need to add more details in order to submit the que ...

JavaScript/Typescript is throwing an error because it is unable to access the property 'username' of an undefined object

In my project, I am attempting to compile a list of Profile objects and then extract specific elements from each object in the list. To accomplish this, I have defined a public interface named Profile, imported it into my component, and instantiated a new ...

Event listeners can only be removed within the useEffect hook

I have encountered an issue when trying to remove an event listener added inside the useEffect hook. The listener is set up to run once after the first rerender, thanks to the empty array passed as the second argument in the useEffect call. I attempted t ...

Determine whether a subdomain is present within an ajax file in php

Looking for assistance with checking the existence of a 'Subdomain' in a file called '\example\sites'. Here's the code: $form = array() ; $form['name'] = "install"; $form['action'] = "?step=2"; $for ...

While executing a jssor code in SP 2007, IE experiences freezing issues

I've integrated a jssor slider with vertical navigation (without jQuery) into a Sharepoint 2007 page using CEWP. All the image links have been replaced with images stored in the SP image library, and the jssor.slider.min.js file has been uploaded to t ...

Nuxt.js is failing to recognize a custom plugin and is returning undefined

After spending time creating a custom plugin for a local database in Nuxt.js, I ran into an issue when trying to register it in nuxt.config.js. To troubleshoot, I tested the example code from the documentation and found that it didn't work either. Thi ...

Tips for embedding multiple video players on a single HTML page

I'm currently experiencing an issue with the YouTube API. I am in the process of developing a website where I want a video to automatically play when I open its corresponding image. The code I used initially worked successfully: <script> // 2. ...

Importing JS files or SDKs in Angular that are not modules

Currently, I am incorporating the Avaya SDK (which consists of 3 JS files) into my Angular project. However, when attempting to import it, I encounter an error stating that it is not recognized as a module. Any suggestions on how to resolve this issue? Th ...

Ways to align the label at the center of an MUI Textfield

My goal is to center the label and helper text in the middle of the Textfield. I managed to achieve this by adding padding to MuiInputLabel-root, but it's not responsive on different screen sizes (the Textfield changes size and the label loses its cen ...

Utilizing jQuery/Ajax to send an ID parameter to a PHP script

This code is where the user interacts. <html> <head> <title></title> <script src="jquery-1.9.1.js"></script> <script src="jquery.form.js"></script> </head> <body> <?php include 'con ...

Which specific jQuery functionality was made visible?

When it comes to jQuery, how is it exposed? // Expose jQuery to the global object window.jQuery = window.$ = jQuery; However, there are in fact two versions of jQuery: var jQuery = (function() { // Define a local copy of jQuery var jQuery = function( s ...