reactjs with axios “Cannot read property 'map' of undefined`”

Question

I was messing around using React, and I get this error while reading json from a local file localhost. I have checked other questions but have not gotten any result. i have install react dev tools from chrome app store and check error so i do not get cross origin error.

Here's the code:

class Content extends React.Component {
    constructor(){
        super();
        this.state={
            json: {
                categories: []          
            }
        };
    }
    componentWillMount(){

        var _this = this;
        var loc = window.location.pathname;
        var dir = loc.substring(0, loc.lastIndexOf('/'));

        this.serverRequest = 
            axios
            .get(dir+"/data.json")
            .then(function(result) {    
            // we got it!
                _this.setState({
                    json:result 
                });
            });
    }
    render() {
        var title =  <a>{this.state.json.title}</a>;
        return (
            <div>
                <h2>Content</h2>
                <h3>{title}</h3>

                {this.state.json.categories.map(function(item) {
                    return (
                        <div key={item.categoryID} className="category">
                            <div> {item.categoryName} </div>  
                            <div> {item.categoryDescridivtion} </div> 
                            <div> {item.videosCount} </div> 
                        </div>
                    );
                })}
            </div>
        );
    }
}

Here's the JSON:

{
    "categories": [{
        "categoryID": "294",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Apps and Side Dishes (Laura)",
        "categoryDescription": "Learn to make amazing appetizers and side dishes with Laura in the Kitchen.",
        "videosCount": "101",
        "forumCategoryID": "163"
    }, {
        "categoryID": "285",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Side Dishes",
        "categoryDescription": "Side dish recipes for salads, vegetables, sauces with Hilah cooking.",
        "videosCount": "38",
        "forumCategoryID": "163"
    }, {
        "categoryID": "337",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Side Dishes (bt)",
        "categoryDescription": "Side dish recipes with Byron Talbott.",
        "videosCount": "5",
        "forumCategoryID": "163"
    }, {
        "categoryID": "301",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Side Dishes for Barbecue",
        "categoryDescription": "Barbecue side dish recipes done on the grill by the BBQ Pit Boys!",
        "videosCount": "43",
        "forumCategoryID": "163"
    }, {
        "categoryID": "297",
        "parentID": "304",
        "subjectID": "7",
        "categoryName": "Soups and Salads (Laura)",
        "categoryDescription": "Looking for the perfect recipe to start your meal? Or are you looking to eat something on the lighter side? These are sure to have you covered!",
        "videosCount": "70",
        "forumCategoryID": "163"
    }],

    "title": "Title page"
}

here is the ouput from debug console regarding result from axios debug console:

Answer 1

Your screenshot from the console makes it clear why it isn't working: result doesn't have a categories property. It's result.data that has the categories, axios wraps the result in an envelope of sorts giving you information about the request (config, headers, status, etc.) and provides the actual data as data. So:

this.serverRequest = 
    axios
    .get(dir+"/data.json")
    .then(function(result) {    
    // we got it!
        _this.setState({
            json:result.data   // ***
        });
    });

Example:

class Content extends React.Component {
    constructor(){
        super();
        this.state={
            json: {
                categories: []          
            }
        };
    }
    componentWillMount(){
        
        var _this = this;
        var loc = window.location.pathname;
        var dir = loc.substring(0, loc.lastIndexOf('/'));
        
        this.serverRequest = 
            axios
            .get(dir+"/data.json")
            .then(function(result) {    
            // we got it!
                console.log(result); // So you can check it against your image
                _this.setState({
                    json:result.data
                });
            });
    }
    render() {
        var title =  <a>{this.state.json.title}</a>;
        return (
            <div>
                <h2>Content</h2>
                <h3>{title}</h3>
                
                {this.state.json.categories.map(function(item) {
                    return (
                        <div key={item.categoryID} className="category">
                            <div> {item.categoryName} </div>  
                            <div> {item.categoryDescridivtion} </div> 
                            <div> {item.videosCount} </div> 
                        </div>
                    );
                })}
            </div>
        );
    }
}

const data = {
    "config": {
        "some": "stuff"
    },
    data: {
        "categories": [{
            "categoryID": "294",
            "parentID": "304",
            "subjectID": "7",
            "categoryName": "Apps and Side Dishes (Laura)",
            "categoryDescription": "Learn to make amazing appetizers and side dishes with Laura in the Kitchen.",
            "videosCount": "101",
            "forumCategoryID": "163"
        }, {
            "categoryID": "285",
            "parentID": "304",
            "subjectID": "7",
            "categoryName": "Side Dishes",
            "categoryDescription": "Side dish recipes for salads, vegetables, sauces with Hilah cooking.",
            "videosCount": "38",
            "forumCategoryID": "163"
        }, {
            "categoryID": "337",
            "parentID": "304",
            "subjectID": "7",
            "categoryName": "Side Dishes (bt)",
            "categoryDescription": "Side dish recipes with Byron Talbott.",
            "videosCount": "5",
            "forumCategoryID": "163"
        }, {
            "categoryID": "301",
            "parentID": "304",
            "subjectID": "7",
            "categoryName": "Side Dishes for Barbecue",
            "categoryDescription": "Barbecue side dish recipes done on the grill by the BBQ Pit Boys!",
            "videosCount": "43",
            "forumCategoryID": "163"
        }, {
            "categoryID": "297",
            "parentID": "304",
            "subjectID": "7",
            "categoryName": "Soups and Salads (Laura)",
            "categoryDescription": "Looking for the perfect recipe to start your meal? Or are you looking to eat something on the lighter side? These are sure to have you covered!",
            "videosCount": "70",
            "forumCategoryID": "163"
        }],

        "title": "Title page"
    },
    "headers": {
        "some": "stuff"
    }
};

const axios = {
    get() {
        return new Promise(resolve => {
            setTimeout(resolve, 100, data);
        });
    }
};

ReactDOM.render(
    <Content />,
    document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>