How to use map function with JSON object fetch though an API

Question

I fetch data from my api, JSON is :

{
    "food": [
        {
            "food": "Not Handle",
            "nb": 49
        },
        {
            "food": "Cooked",
            "nb": 1
        },
        {
            "food": "Raw",
            "nb": 1
        },
    ]
}

My data are stored in my state when the component didMount so this.state.food contain my JSON data

I tried to to render it like this:

render() {
    return (
        <Row>
            {this.state.food &&
                this.state.food.map((food) => {
                    return (
                        <div >
                            <Col sm={12} md className="mb-sm-2 mb-0">
                                <div className="text-muted">{food.food} :</div>
                                <strong> {food.nb}</strong>
                            </Col>
                        </div>)
                })}
        </Row>
    )
}

CompenentDidMount : (getCall is a custom function to fetch)

async componentDidMount () {
const food = await getCall(
    `stats/event/count/food?eventRef=${this.props.eventRef}`,
    this.props.authToken,
    false
  );
  console.log('DATA', food); //  printed my data perfectly
  this.setState({ food: food});
}

I think I miss something, because I can't map on this object I get map is not a function, I saw it's only an array ?

expected result is really simple i want to display :

Not handle: 49
Cooked: 1
Raw: 1

Your code seems to be correct, are you sure that the data is fetched ? What do you mean by 'can't map' ? Can you show the componentDidMount method ? — Treycos
– Treycos, Commented Feb 13, 2019 at 8:58
Yes sorry I didn't mention, I got map is not a function, i'm sure I got my data, I printed it with a console.log, I added my componentDidMount as well — xif
– xif, Commented Feb 13, 2019 at 9:02

Arpit Agrawal · Accepted Answer · 2019-02-13 10:43:00Z

2

Try this :

async componentDidMount () {
const data = await getCall(
    `stats/event/count/food?eventRef=${this.props.eventRef}`,
    this.props.authToken,
    false
  );
  console.log('DATA', data); //  printed my data perfectly
  this.setState({ food: data.food});
}

Assumption : await getCall() return this exact data :

{
    "food": [
        {
            "food": "Not Handle",
            "nb": 49
        },
        {
            "food": "Cooked",
            "nb": 1
        },
        {
            "food": "Raw",
            "nb": 1
        },
    ]
}

if this is exactly what is returned from getCall(), then you are getting confused due to wrong variable name. Data is actually a map with one key as food which is the array. So in state you have to actually get the value of food key from data which has map function.

answered Feb 13, 2019 at 10:43

Arpit Agrawal

1,1801 gold badge10 silver badges22 bronze badges

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

Comments

Anitta Paul · Accepted Answer · 2019-02-13 10:59:02Z

1

After your api call change the setState statement to this.setState({ food: food.food});

What you are getting as response from your api is json. so you are trying to use map function on a json. map function could only be used with array.

answered Feb 13, 2019 at 10:59

Anitta Paul

4756 silver badges18 bronze badges

1 Comment

xif Over a year ago

thanks for your precision about it, because I tried to map on a json instead on a array, I'll be more focused on it next time !

Collectives™ on Stack Overflow

How to use map function with JSON object fetch though an API

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related