Mapping array in React JS

Question

In a react / gatsby / wordpress project, I need to pull data from a 3rd party, non-graphql API. I am attempting to parse the data returned from this API and make it available for use with graphql.

I'm following the accepted answer in this post: GatsbyJS getting data from Restful API

The error I'm receiving is: res.data.full_options.map is not a function

Here's my code thus far:

exports.sourceNodes = async ({ actions }) => {
    const { createNode } = actions;

    const fetchJoinOptions = () => axios.get(`https://example.com/path/to/api`)

    const res = await fetchJoinOptions()

    console.log(res.data)

    res.data.full_options.map((option, i) => {

    })
}

console.log(res.data) outputs the following:

{
  join_options: { '76': 'Yearly Membership', '366': 'Halloween Sale - 50% Off!' },
  full_options: {
    '76': {
      optionid: '76',
      siteid: '15',
      networkid: '0',
      deleted: '0',
      enabled: '1',
      orderid: '1',
      option_type_id: '0',
      billerid: '0',
      programid: '0',
      legacy: '0',
      details: [Object]
    },
    '97': {
      optionid: '97',
      siteid: '15',
      networkid: '0',
      deleted: '0',
      enabled: '1',
      orderid: '43',
      option_type_id: '0',
      billerid: '0',
      programid: '0',
      legacy: '0',
      details: [Object]
    },
    '190': {
      optionid: '190',
      siteid: '15',
      networkid: '0',
      deleted: '0',
      enabled: '1',
      orderid: '44',
      option_type_id: '0',
      billerid: '0',
      programid: '0',
      legacy: '0',
      details: [Object]
    }
  },
  default_option: '76',
  special_options: { '236': 'Join with Gift Card' }
}

Here's the error in it's entirety:

 ERROR #11321  PLUGIN

"gatsby-node.js" threw an error while running the sourceNodes lifecycle:

res.data.full_options.map is not a function

  26 |     console.log(res.data)
  27 |
> 28 |     res.data.full_options.map((option, i) => {
     |                           ^
  29 |
  30 |     })
  31 |

File: gatsby-node.js:28:27

Could you please explain how I can map this data?

score 1 · Accepted Answer · edited Nov 09 '21 at 06:11

1

You need to convert your response in Object.entries or Object.values because getting a response in Object format not Array.

Object.entries() and Object.values()

Example :

Object.entries()

const object1 = {
    a: 'somestring',
    b: 42
};

for (const [key, value] of Object.entries(object1)) {
    console.log(`${key}: ${value}`);
}

// expected output:
// "a: somestring"
// "b: 42"

Object.values()

const object1 = {
    a: 'somestring',
    b: 42,
    c: false
};

console.log(Object.values(object1));
// expected output: Array["somestring", 42, false]

edited Nov 09 '21 at 06:11

Pradip Dhakal

1,872
1
12
29

answered Oct 29 '21 at 12:51

Asif vora

3,163
3
15
31

1

Accepted as the solution. Thanks for the detailed explanation. – Charles Langley Oct 29 '21 at 13:08

score 0 · Answer 2 · answered Oct 29 '21 at 12:51

0

I think that problem is that you try to iterate over object, try something like:

const output = Object.keys(res.data.full_options).map((key)=>{
something(res.data.full_options[key]) //something you want to do with this value
})

answered Oct 29 '21 at 12:51

Wraithy

1,722
1
5
13

score 0 · Answer 3 · answered Oct 29 '21 at 12:51

0

The issue is here:

full_options: {

here full_options is not an array its an object and map() works on array.

To handle this, try Object.values on full_options, it will return an array and on array you can call map() function.

answered Oct 29 '21 at 12:51

Mayank Pandeyz

25,704
4
40
59

Mapping array in React JS

3 Answers3