未捕获的TypeError无法读取json数据未定义的属性'image'

Question

I'm having an

Uncaught TypeError cannot read property 'image' of undefined

error when calling some Json data. My js is the following:

$.getJSON('/js/data.json', function (json) {
    Object.keys(json).forEach(function (country) {
        $(".marker." + country.toLowerCase()).on("click", function () {
            $("#show").html(
                "Image: <img src=" + json[country][0].image + ">" +
                "| Description: <h1>" + json[country][0].description) + "</h1>";
        });
    });
});

and my data.json the following:

{
    "france": {
        "image": "img/ausralia.jpg",
        "description": "number django 1"
    },
    "australia": {
        "image": "img/ausralia.jpg",
        "description": "number django 2"
    },
    "uk": {
        "image": "img/ausralia.jpg",
        "description": "number django 3"
    }
}

ON click, no data are being display and I'm having that error being display in my console.

The weird thing is that If i call the data like this in my js, the error doesn't appear and everything works correctly. But I need to be able to call the data from an external file.

var json = {
    "France": [{
        "image": "img/ausralia.jpg",
        "description": "number django 1"
    }],
    "Australia": [{
        "image": "img/ausralia.jpg",
        "description": "number django 2"
    }],
    "uk": [{
        "image": "img/ausralia.jpg",
        "description": "number django 2ee"
    }]
}

Object.keys(json).forEach(function (country) {
    $(".marker." + country.toLowerCase()).on("click", function () {
        $("#show").html(
            "Image: <img src=" + json[country][0].image + ">" +
            "| Description: <h1>" + json[country][0].description) + "</h1>";
    });
});

Any help will be amazing, I know there is post about this error, but I cant find any solution to make it work !

Hope it make sense , thanks for your time !

Answer 1

Try this,

Object.keys(json).forEach(function (country) {

    if(typeof json[country][0].image !== "undefined" && typeof json[country][0].description !== "undefined" ) {

        $(".marker." + country.toLowerCase()).on("click", function () {

            $("#show").html( "Image: <img src=" + json[country][0].image + ">" + "| Description: <h1>" + json[country][0].description) + "</h1>";

        });

    }

});