Append API json response to MetaInfo Vue js

Question

i have a meta tag that have structure like this

  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'
        }
      ]
    }

  },

and i want to append my api response to my meta tag, but i don't know how to make a data like this

this is 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 the expected result { property: my property, content: my content } and how do i append my json response to my metaInfo?

Answer 1

Since metaInfo is a function that returns an object, So collect that object in a container i.e metaInfoData.

map over your data array and convert it into required format and then append it into 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);