Click here to Skip to main content
16,015,531 members
Search within:


Uncaught except map is not a function in react?
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am experience a problem im using map to pass each value as an array to my rest api. How can i get pass this problem?

What I have tried:

import React from "react";
import './App.css';
class SideBar extends React.Component {
   
    // Constructor 
    constructor(props) {
        super(props);
   
        this.state = {
            items: [],
            DataisLoaded: false
        };
    }
   
    // ComponentDidMount is used to
    // execute the code 
    componentDidMount() {
        fetch(
"https://fe-assignment.vaimo.net/")
            .then((res) => res.json())
            .then((json) => {
                this.setState({
                    items: json,
                    DataisLoaded: true
                });
            })
    }
    render() {
        const { DataisLoaded, items } = this.state;
        if (!DataisLoaded) return <div>
            <h1> Pleses wait some time.... </h1> </div> ;
   
        return (
        <div className = "sidebar">
            <h1> Fetch data  </h1>  {
                items.map((item) => ( 
                <ol key = { item.name } >
                   { item.country }, 
                     { item.title }, 
                    { item.lead_time } 
                    </ol>
                ))
            }
        </div>
    );
}
}
Posted
Updated 14-Jun-22 3:46am
Add a Solution

1 solution

Look at the JSON being returned: it's not an array, it's a single object:
JSON
{
    "success": 1,
    "product": {
        "name": "...",
        "tags": [
            "..."
        ],
        "options": {
            "...": {
                "label": "...",
                "price": {
                    "value": ...,
                    "currency": {
                        "code": "...",
                        "symbol": "...",
                        "format": "..."
                    }
                },
                "old_price": {
                    "value": ...,
                    "currency": {
                        "code": "...",
                        "symbol": "...",
                        "format": "..."
                    }
                }
            },
            ...
        },
        "discount": {
            "amount": "...",
            "end_date": "..."
        },
        "gallery": [
            {
                "main": "..."
            }
        ],
        "shipping": {
            "method": {
                "country": "...",
                "title": "...",
                "shipping_time": {
                    "value": "...",
                    "info": "..."
                },
                "cost": {
                    "value": ...,
                    "currency": {
                        "code": "...",
                        "symbol": "...",
                        "format": "..."
                    }
                }
            },
            "lead_time": {
                "value": "...",
                "info": "..."
            },
            "props": {
                "ready_to_ship": true,
                "in_stock": true,
                "fast_dispatch": true
            }
        },
        "reviews": {
            "rating": "...",
            "count": ...,
            "total_buyers": ...
        }
    }
}
Your items variable contains a single object, which does not have a map method[^].

And with the exception of the tags and gallery properties, there's nothing in that object which would be represented as an array either.
 
Share this answer
 
Posted
Comments
Gcobani Mkontwana 15-Jun-22 2:46am    
@Richard Deeming which means the tags that return an object back are the ones with data right? While those that are empty an map method wont be useful to be used to them unlike ones with single object(has data return like true?
Richard Deeming 15-Jun-22 3:33am    
You haven't explained what you're trying to extract from the data, and there's nothing in the JSON that has the properties your code is trying to extract.

You need to work out what data you're trying to get, and how it relates to the JSON that's returned. Nobody else can do that for you.
Gcobani Mkontwana 15-Jun-22 4:16am    
@Richard Deeming you obsolutely correct, i will have local data first then i can later fetch that local data without using URL parameter. An example will be to fetch local data as json format, that part just done created and it does shows all values i need for my project
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise
Privacy
Cookies
Terms of Use
Last Updated 14 Jun 2022
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web03 2.8:2024-07-22:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900