CODEWITHSUNDEEP
javascriptarraysreactjsreduxcharts
Mando
Mando

Reputation: 41

How do I map JSON data that is passed into a function?

Im trying to take JSON data and pass it into my 'HistoryChart' Component to try and map the dates and prices into two arrays so that I can present them on my chart. However, I keep getting undefined errors.

Here is the JSON Data:

{
    "_id": 1,
    "name": "",
    "brand": "",
    "image": "",
    "sources": [],
    "history": [
        {
            "_id": 3,
            "price": "299.99",
            "product": 1,
            "date": "2021-07-01"
        },
        {
            "_id": 4,
            "price": "399.99",
            "product": 1,
            "date": "2021-07-08"
        },
        {
            "_id": 5,
            "price": "499.99",
            "product": 1,
            "date": "2021-07-15"
        },
        {
            "_id": 6,
            "price": "599.99",
            "product": 1,
            "date": "2021-07-22"
        },
        {
            "_id": 7,
            "price": "699.99",
            "product": 1,
            "date": "2021-07-29"
        }
    ]
}

Here is my HistoryChart Component:

function HistoryChart({product}) {
 
    var dates = product.history.map(function(e){ //<-- The Problem lies here where it says cannot map undefined.
        return e.date;
    });

    var prices = product.history.map(function(e){
        return e.price;
    });

    return (
        <div>
            <Line
                data={{
                    labels: dates,
                    datasets: [{
                        label: `Average Price History (ID: ${product._id})`, //<-- This part works
                        backgroundColor:/* 'transparent' */ '#00ad0e',
                        borderColor: '#00ad0e',
                        data: prices,
                    }]
                }}
                width={100}
                height={50}
                options={{ maintainAspectRatio: true }}
            />
        </div>
    )
}

I am also using redux to get the Data:

const productDetails = useSelector(state => state.productDetails)
const {error, loading, product} = productDetails

And the data is passed into the HistoryChart Component like this:

 <HistoryChart product={product}/>

Any Help would be Much appreciated, Thanks.

Upvotes: 1

Views: 850

Answers (2)

Elvis Pesconi
Elvis Pesconi

Reputation: 139

Sorry if this is not your principal problem, but same time when .map resulting in undefined the most simple adjust is verify if your array is undefined.

So in my projects i always check first if array is undefined, i will use your code to do a example

  function HistoryChart({product}) {
     
if (product !== undefined){
        var dates = product.history.map(function(e){ 
            return e.date;
        });

    
        var prices = product.history.map(function(e){
            return e.price;
        });
}

Try this aproach and let me know if this work.

Upvotes: 2

Ali Faiz
Ali Faiz

Reputation: 232

Cause of Error

As the data come from server, it take some time to load. and you get the undefine error because 1st time you want to access history of object product which is not yet loaded successfully.

Solution

const price = product && product.history.map(//do what you want)

use key values of object this way not cause any error because if product is not loaded it does'nt call map function and when product object loaded successfully it will call map function

Upvotes: 0

Related Questions