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

Issue with by.cssContainingText function not performing as intended

Executing Two Distinct JQuery Api Requests

Effortlessly glide to the top of the webpage

Modifying the font style within an ePub document can affect the page count displayed in a UIWebView

Winning opportunities created by using credits in the slot machine

Adding content to the parent element immediately after it is generated using jQuery

Transform a CSV document into JSON without any quotation marks surrounding decimal values

JavaScript's version of "a certain phrase within a text"

encoding the special character "ü" in json_encode as either 'ü' or '&#

Mastering the correct usage of the submitHandler method in the jQuery validation plugin

The Power of Asynchronous Programming with Node.js and Typescript's Async

Utilize a variable within the res.writeHeads() method in Node.js

retrieving the current value of a variable from a jQuery function

Error during compilation in npm (symbol '_' is not recognized)

Search for JSON keys in the output data stream

Attention all controllers summoned from one AngularJS document

Tips for utilizing a switch statement

A step-by-step guide on displaying a loading spinner during the retrieval and assembly of a component framework (Astro Island) with Vue and AstroJS

Guide to creating a cryptosystem using a Synchronous Stream Cipher with Vue js

Encountering an error in AngularJS $http calls while trying to loop: TypeError - object is not functioning