JSON and JavaScript - how to read my list by using json

Question

I don't know why I can not read object by using below way

function loadData(){
    $.getJSON('data.json', function(data) {
        $.each(data, function(Index, entry) {
            mem = new user(entry.name, entry.age, entry.location);
            userList.push(mem);
        });
    });
    return false;
}

function fillTable(){
    var html = "";
    console.log(userList);
    console.log(userList[0].name);
    $.each(userList,function(index , user){
       console.log(index);
        html += '<tr>';
        html +=  '<th>'+this.name+'</th>';
        html +=  '<th>'+this.age+'</th>';
        html +=  '<th>'+this.loca+'</th>';
        html += '</tr>'

        console.log(this.name);
    });
    $("#listTable").html(html);
}

the screen shot of above result in console is enter image description here

You cannot access it as `entry.name` as it is not an js object though its an array. What server side language are you using? If it is PHP, try `json_encode()`; — Vishal Kumar Sahu, Feb 20 '17 at 05:58
You need to show the sample structure of your JSON file then... — Vishal Kumar Sahu, Feb 20 '17 at 06:01
[ { "name": "이름", "age": "나이", "location": "지역" }, { "name": "곽성훈", "age": "28", "location": "영등포" } ] — 곽성훈, Feb 20 '17 at 06:02
By server I meant server side scripting. try `console.log(data);` after second line and show the output. — Vishal Kumar Sahu, Feb 20 '17 at 06:02
Uncaught ReferenceError: data is not defined at fillTable (main.html:116) at HTMLDocument. (main.html:95) at j (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at Function.ready (jquery.min.js:2) at HTMLDocument.J (jquery.min.js:2) — 곽성훈, Feb 20 '17 at 06:04

score 2 · Answer 1 · answered Feb 20 '17 at 06:09

2

Call fillTable in loadData function, as getJson is async

function loadData(){
            $.getJSON('data.json', function(data) {
                $.each(data, function(Index, entry) {
                    mem = new user(entry.name, entry.age, entry.location);
                    userList.push(mem);
                });
fillTable(); -- call it here
            });

            return false;
        }

answered Feb 20 '17 at 06:09

Anil

3,722
2
24
49

wowowowowowowowowowowwo olololololololololololololololol I solve this problem I don't know why i should code like this and the reason of this but it's working thanks~~~~~~~~~~~~ – 곽성훈 Feb 20 '17 at 06:30
To understand async vs sync refer http://stackoverflow.com/questions/748175/asynchronous-vs-synchronous-execution-what-does-it-really-mean and and please accept as answered. – Anil Feb 20 '17 at 06:40

score 0 · Answer 2 · answered Feb 20 '17 at 06:28

   function loadData(){
        $.getJSON('data.json', function(data) {
            $.each(data, function(Index, entry) {
                mem = new user(entry.name, entry.age, entry.location);
                userList.push(mem);
            });
      fillTable()
        });

        return false;
    }      

   function fillTable(){
        var html = "";
        console.log(userList);
        console.log(userList[0].name);
        var self = this;
        $.each(userList,function(index , user){
           console.log(index);
            html += '<tr>';
            html +=  '<th>'+self.name+'</th>';
            html +=  '<th>'+self.age+'</th>';
            html +=  '<th>'+self.loca+'</th>';
            html += '</tr>'

            console.log(self.name);
        });

}

this will point to inside function, you need to delcare this outside this in outside function.

Try this it may work

JSON and JavaScript - how to read my list by using json

2 Answers2