Adding the API JSON response to the MetaInfo in Vue.js

Question

Adding the API JSON response to the MetaInfo in Vue.js

i am dealing with a meta tag that has the following structure

  metaInfo () {
    return {
      title: 'my title',
      meta: [
        {
          name: 'description',
          content: 'my description'
        },
        {
          property: 'og:title',
          content: 'my title2'
        },
        {
          property: 'og:site-name',
          content: 'my site name'
        },
        {
          property: 'og:type',
          content: 'website'
        },
        {
          name: 'robots',
          content: 'index,follow'
        }
      ]
    }

  },

i am looking to add my api response to this meta tag, but i'm unsure how to format the data correctly

this is the output of my API response

data: [{meta_tags_id: 3, meta_tags_properties: "my property", meta_tags_content: "my content"}]
0: {meta_tags_id: 3, meta_tags_properties: "my property", meta_tags_content: "my content"}
meta_tags_content: "my content"
meta_tags_id: 3
meta_tags_properties: "my property"
error: 0
message: "successfully get all meta tags"

this is what i expect as a result: { property: my property, content: my content } and how can i merge my json response with my metaInfo?

javascript json vue.js vue-meta

Answer 1

Answer №1

To store the object returned by the metaInfo function, create a container called metaInfoData.

Iterate over the data array and transform it into the required format before adding it to metaInfoData.meta

const metaInfo = function () {
  return {
    title: "my title",
    meta: [
      {
        name: "description",
        content: "my description",
      },
      {
        property: "og:title",
        content: "my title2",
      },
      {
        property: "og:site-name",
        content: "my site name",
      },
      {
        property: "og:type",
        content: "website",
      },
      {
        name: "robots",
        content: "index,follow",
      },
    ],
  };
};

const data = [
  {
    meta_tags_id: 3,
    meta_tags_properties: "my property",
    meta_tags_content: "my content",
  },
];

const metaInfoData = metaInfo();
const convertedData = data.map((obj) => {
  const { meta_tags_properties, meta_tags_content } = obj;
  return {
    property: meta_tags_properties,
    content: meta_tags_content,
  };
});
metaInfoData.meta = [...metaInfoData.meta, ...convertedData];
console.log(metaInfoData);

Answer 2

To store the object returned by the metaInfo function, create a container called metaInfoData.

Iterate over the data array and transform it into the required format before adding it to metaInfoData.meta

const metaInfo = function () {
  return {
    title: "my title",
    meta: [
      {
        name: "description",
        content: "my description",
      },
      {
        property: "og:title",
        content: "my title2",
      },
      {
        property: "og:site-name",
        content: "my site name",
      },
      {
        property: "og:type",
        content: "website",
      },
      {
        name: "robots",
        content: "index,follow",
      },
    ],
  };
};

const data = [
  {
    meta_tags_id: 3,
    meta_tags_properties: "my property",
    meta_tags_content: "my content",
  },
];

const metaInfoData = metaInfo();
const convertedData = data.map((obj) => {
  const { meta_tags_properties, meta_tags_content } = obj;
  return {
    property: meta_tags_properties,
    content: meta_tags_content,
  };
});
metaInfoData.meta = [...metaInfoData.meta, ...convertedData];
console.log(metaInfoData);

Adding the API JSON response to the MetaInfo in Vue.js

Answer №1

Similar questions

What is the best way to implement Axios for data fetching in Gatsby's useStaticQuery function?

Incorporate an icon into a text input field using Material UI and React

Generating a fresh array by filtering out elements with specific properties using the .map() method

Switch the dropdown selection depending on the checkbox status

Transform JSON array containing identical key-value pairs

Exploring the Differences Between Arrays in JavaScript

Secure communication and client-server API key protection

Receive real-time price updates from Next.js using GetServerSideProps data

Is it possible to submit two forms simultaneously using jQuery or AJAX?

List component in Angular not refreshing after sorting the array in the service

How come my total isn't zero after I get a 1 on the dice roll?

Use yarn to install both devDependencies and dependencies simultaneously

Why are my cursor and my drawing line on opposite sides?

Choosing between exclusive choices across multiple selection elements in Vue 3

Code snippet for a click event in JavaScript or jQuery

Tips for positioning HTML elements at the exact mouse location as it moves, without any delay?

jQuery is failing to properly render dynamic content data identifiers

Navigating sub-domains swiftly

Getting the ID of a select input option in Vue.js using FormulateInput

An issue occurred when trying to retrieve JSON data using JAXB, but the data can be easily obtained in XML format