get data from json file

Question

my code :

1. file_json.json:

{
    "bio" :
    [
        {
            "id" : "1",
            "name" : "Json"
        },
        {
            "id" : "2",
            "name" : "PHP"
        },
        {
            "id" : "3",
            "name" : "Jquery"
        }
    ]
}

and code html:

<select id="select1">
    <option value="1">1 | Json</option>
    <option value="2">2 | PHP</option>
    <option value="3">3 | Jquery</option>
</select>

<span id="name"></span>

$(document).ready(function(){
    $('select#select1').on('change', function(event){
        $.getJSON('file_json.json', function(data) {
            console.log(data.bio.name);
        });
    });
});

but in console browser undefined, how to fix because i tired on this code ... thanks for any help

Answer 1

Yes Bio is an array.

It is something like this Bio []. If you need to acess array data , index will be required.

At index 0 : bio[0]
At index 1 : bio[1] 

and so on ...

So please use loop some thing like this,

for(var i=0;i < bio.length;i++){
   id = bio[i].id;
   name = bio[i].name;
}

Answer 2

bio is an array so you'd need data.bio[0].name