React Javascript Handle Possible Null Data

Question

I am using React to build a simple app that gets data back from some API. I am not sure what is the best way to handle the fields when some of them doesnt come back. For example, Let's say the JSON data comes back looking like the following

comicDetail : {
    name : iron man, 
    age: {
        comicAge: 35,   
    },
    favouriteFood: {
        fruit: {
            apple
        }
    }
    hobby: {
        favourite: {
            build machines        
        }
    }
    series: [iron man 1, iron man 2]
    relationship: {
        jane: iron man 1, 
        Mary: iron man 2
    }, 
    collection : {
            image : www.image1.com 
        }            
    }
}

My React code that renders the data

renderComicDetail() {
    var cd = this.props.comicDetail;        
    if (!cd) {
        return (
            <div>No Data</div>
        )
    }
    const imageUrl = cd.collection.image
    return (
        <div>
            <div>age: {cd.age.comicAge}</div>                
            <div>favourite fruit: {cd.favouriteFood.fruit}</div>                
            <div>favourite hobby: {cd.hobby.favourite}</div>                
        </div>
    )
}

This code will break if either of the of cd.favouriteFood, cd.age, cd.hobby is undefined as I will be reading from undefined. (This will happen as not all fields will come back) What is the cleanest way to allow me to read the data and take care of the undefined case so I dont read .fruit from undefined.

A way I can think of is to have check cases for each part of the json data for every item. But it seems messy and will not be scalable as I might have data that looks like

You can do conditional rendering and then do a check to see if the specific part is undefined before accessing it. — Andrew Li
– Andrew Li, Commented Apr 29, 2017 at 4:20

cabolanoz · Accepted Answer · 2017-04-29 04:57:47Z

2

You can specify a condition to render a component in JSX, your code would look something like this (assuming that if hobby or food are defined then it would have renderable properties):

var cd = this.props.comicDetail;        
    if (!cd) {
        return (
            <div>No Data</div>
        )
    }
    const imageUrl = cd.collection.image;


    return (
        <div>
            <div>age: {cd.age.comicAge}</div>                
            {cd.favouriteFood && <div>favourite fruit: {cd.favouriteFood.fruit}</div>}
            {cd.hobby && <div>favourite hobby: {cd.hobby.favourite}</div>}
        </div>
    )

I also advice you to either create separate componet for both hobby and food, so it can make your code more readable and reusable. But it definitely depends on your specific usage.

answered Apr 29, 2017 at 4:57

cabolanoz

2941 silver badge9 bronze badges

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

Comments

Nitesh · Accepted Answer · 2017-04-29 04:46:00Z

if you only don't want to display content which is undefined, you can do like this:

return (
        <div>
            {cd.age && cd.age.comicAge ? <div>age:{cd.age.comicAge}</div> : <div>No data</div> 
            } 
            {cd.favouriteFood && cd.favouriteFood.fruit ? <div>favourite fruit: {cd.favouriteFood.fruit}</div> : <div>No data</div> 
            } 
            {cd.hobby && cd.hobby.favourite ? <div>favourite hobby: {cd.hobby.favourite}</div> : <div>No data</div> 
            }                                            
        </div>
    )

or if you don't want like this, create a separate function that checks valid fields

if (!isValid(cd)) {
        return (
            <div>No Data</div>
        )
 }

isValid(obj){
  // check if all objects available are valid or not and return true or false as needed.
}

Vivek · Accepted Answer · 2017-04-29 05:08:35Z

0

You can use any JSON schema validator for this purpose and there are lots of them. for e.g jsonschema

In your case you can create schema something like this ( for first two properties)

var schema = {
"id": "/ComicDetail",
"type": "object",
"properties": {
    "name": {
        "type": "string"
    },

    "age": {
        "type": "object",
        "properties": {
            "comicAge": {
                "type": "integer"
            }
        }
    }
},
"required": ["name", "age"]
};

You can also embed two or more schema together and form a new schema.

answered Apr 29, 2017 at 5:08

Vivek

751 silver badge9 bronze badges

Comments

Mahabub Alam · Accepted Answer · 2017-04-29 06:01:12Z

0

One way to access deep object property using lodash. You can import lodash in your component.

_.get(cd, 'favouriteFood.fruit') || ''

https://lodash.com/docs/4.16.6#get

To make the code cleaner, You can also declare a function that takes your object(i.e. cd in your case) and path(i.e. favouriteFood.fruit in your case) and return the value from function.

edited Apr 29, 2017 at 6:01

answered Apr 29, 2017 at 5:39

Mahabub Alam

264 bronze badges

Comments

Dan · Accepted Answer · 2018-06-11 18:52:55Z

0

I really like this method of un-nesting objects:

// Below will not error out, but give undefined when you use the non-existant variables
const { cd } = (this.props || {}).comicDetail || {}
const { imageUrl } = ((cd || {}).collection || {}).image || {}

// Or
const { age, favouriteFood, hobby } = cd
const { comicAge } = age // forgot if you need to add || {} here
const { fruit } = favouriteFood
const { favourite } = hobby

You always want to validate your variables and you never want your variables to break during validation.

So now, you can safely use these 'potentially' undefined variables and validate that they contain values before you use them.

favorite || 'defaultValue'
if (!favorite) return null

answered Jun 11, 2018 at 18:52

Dan

2,7653 gold badges23 silver badges58 bronze badges

Comments

brooksrelyt · Accepted Answer · 2019-11-05 19:48:50Z

0

How about use ternary operator?

cd.age !== undefined ? cd.age.comicAge : ' '

edited Nov 5, 2019 at 19:48

brooksrelyt

4,0536 gold badges37 silver badges58 bronze badges

answered Apr 29, 2017 at 4:29

JiN

8281 gold badge8 silver badges15 bronze badges

Comments

ShivamRajput · Accepted Answer · 2017-04-29 05:00:07Z

-1

You can try your return statement such like that:

return (
        <div>
            { cd.age.comicAge && <div>age: {cd.age.comicAge }</div>}
            { cd.favouriteFood.fruit &&  <div>favourite fruit: {cd.favouriteFood.fruit}</div> }          

            {cd.hobby.favourite &&  <div>favourite hobby: {cd.hobby.favourite}</div>                
        </div>
    )

If your any prop is null or undefined, the right side of the condition is skipped.

edited Apr 29, 2017 at 5:00

answered Apr 29, 2017 at 4:39

ShivamRajput

1661 silver badge5 bronze badges

2 Comments

Andrew Li Over a year ago

This will throw an error along the lines of "cannot read property comicAge of undefined. The same goes for the others.

ShivamRajput Over a year ago

Try once that newly added my code, if it will not work then comment on my post once, I will give you another solution.

Collectives™ on Stack Overflow

React Javascript Handle Possible Null Data

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related