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?

add the API response data also and would be great if you can show what is your desired result — DecPK
– DecPK, Commented Apr 22, 2021 at 14:15
Add api response as a text not as a picture and desired result as an object. It is not so clear what exactly do you want to do. — DecPK
– DecPK, Commented Apr 22, 2021 at 14:21

DecPK · Accepted Answer · 2021-04-22 14:35:45Z

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);

answered Apr 22, 2021 at 14:35

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

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

9 Comments

someone_that_needHelp Over a year ago

can you tell me how do i map those data to an array and convert it? sorry sir im tottaly new in javascript

DecPK Over a year ago

user inbuilt map function in js`. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

DecPK Over a year ago

See my code where I've used data.map((obj) => {.......

someone_that_needHelp Over a year ago

sir @decpk but how do i convert my response.data.data to const data =[] ?

DecPK Over a year ago

const data = [...response.data.data] simple

|

Collectives™ on Stack Overflow

Append API json response to MetaInfo Vue js

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related