Pinterest API: Cannot access 'Metadata' object property, even though other properties are accessible

Question

I am working with the Pinterest API. I can access all of the data returned from my response EXCEPT the metadata object property. This is my code to get the Pins Data:

let boarddata = [];
axios
   .get(`PINTEREST_API_URL`)
   .then(
     function(response) {
       boarddata = response.data.data;
       console.log(response.data.data);
     }.bind(this)
   );

Console.log of response.data.data[0]:

0:
  id: "167899892346462055"
link: "https://www.pinterest.com/r/pin/167899892346462055/5073939286663940267/f1b6e174ab1a06c38171839b6712e3a30ca6f73f0ee7ca480a72f8fb416f6537"
note: " "
url: "https://www.pinterest.com/pin/167899892346462055/"
attribution: null
image:
  original: {
    url: "https://i.pinimg.com/originals/27/e4/d6/27e4d67ba04f011da678fdd0da8c1d1a.jpg",
    width: 713,
    height: 1024
  }
__proto__: Object
metadata:
  link: {
    title: "Berry French Toast Casserole (Make Ahead Overnight) - Joyous Apron",
    description: "This Berry French Toast Casserole recipe is an eas…topped with berries. Make ahead the night before!",
    favicon: "https://i.pinimg.com/favicons/5c0314c869b732323c11…64e959475480.ico?70361f3f8b1918702ceaa18bc4b74ebe",
    locale: "en",
    site_name: "Joyous Apron"
  }
article: {
  name: "Berry French Toast Casserole",
  description: "This Berry French Toast Casserole recipe is an eas…topped with berries. Make ahead the night before!",
  authors: Array(0),
  published_at: "2018-07-26T00:00:00"
}
recipe: {
  name: "Berry French Toast Casserole",
  servings: {…},
  ingredients: Array(6)
}
__proto__: Object
original_link: "http://www.joyousapron.com/berry-french-toast-casserole/#wprm-recipe-container-2578"
__proto__: Object

I want to map the response object and pull out data so i can build a display of the users pins on the page. I can access everything else except the metadata object property which is what I need the most. Here is the code for how I want to access and use the object data.

  showPins = boarddata => {
    let boardPins = this.state.boardPins;
    console.log(boarddata);
    boarddata.map((pin, index) => {
      const newPin = {
        id: pin.id,
        image: pin.image.original.url,
        name: pin.metadata.link.title,
        description:
          pin.metadata.article.description ||
          pin.metadata.link.description,
        ogLink: pin.original_link
      };
      boardPins.push(newPin);
    });
    this.setState({
      boardPins
    });
    console.log(this.state.boardPins);
  };

This returns:

index.js:337 Uncaught (in promise) TypeError: Cannot read property 'title' of undefined
    at index.js:337
    at Array.map (<anonymous>)
    at t.a.showPins (index.js:333)
    at t.<anonymous> (index.js:316)

When I console log the properties I need before executing the map function they show up. (see below)

console.log(boarddata[0].image.original.url); //https://i.pinimg.com/originals/27/e4/d6/27e4d67ba04f011da678fdd0da8c1d1a.jpg
console.log(boarddata[0].id); //167899892346517912
console.log(boarddata[0].metadata.link.title); //Berry French Toast Casserole (Make Ahead Overnight) - Joyous Apron
console.log(boarddata[0].metadata.link.description); //This Berry French Toast Casserole recipe is an eas…topped with berries. Make ahead the night before!
console.log(boarddata[0].original_link); //http://www.joyousapron.com/berry-french-toast-casserole/#wprm-recipe-container-2578

Any suggestions would be greatly appreciated

Answer 1

It's not actually the metadata property that's undefined, it's the link property of the metadata property. Are you sure that ALL of the data objects are the same? It's quite possible that they are inconsistent. Is seems as if you only examined the first element of your response data (response.data.data[0] and boarddata[0])

To examine this further, try something like:

showPins = boarddata => {
    let boardPins = this.state.boardPins;
    console.log(boarddata);
    boarddata.map((pin, index) => {
      console.log(`${index}: ${JSON.stringify(pin.metadata)}`);
      // ...
    });
    this.setState({
      boardPins
    });
    console.log(this.state.boardPins);
  };