How to binding data from local json file. What i do wrong in this code? plz

[adisak1618]

i use jQuery to get persons.json from local file and set to this.employees. what should i do?

<link rel="import" href="../bower_components/polymer/polymer.html">



<script type="text/javascript" src="../bower_components/jquery-2.1.0.min/index.js"></script>


            <!--- render menu item ----->
              <dom-module id="employee-list">
                  <link rel="import" type="css" href="x-app.css">
                  <template>

                    <paper-menu class="list" on-iron-activate="_listTap">
                    <template is="dom-repeat" items="{{employees}}">


                        <paper-item>
                            <div> <span>{{item.nickname}}</span> </div>
                            <div> <span>{{item.phone}}</span> </div>
                        </paper-item>

                    </template>
                      </paper-menu>

                  </template>

                  <script>
                    Polymer({
                      is: 'employee-list',
                      ready: function() {


                            console.log(this.employees);
                         $.get('src/Persons.json',function(data){
                            this.employees = $.parseJSON(data).results;
                             console.log(this.employees);
                         });



                      }
                    });
                  </script>

                </dom-module>
              <!------- end render menu item ---------->

[adisak1618]

json file look like this

{ "results": [
{
"address": "",
"createdAt": "2015-06-13T15:59:54.223Z",
"email": "",
"facebook": "dtac",
"fbID": "dtac",
"fname": "Dtac",
"instagram": "",
"lineID": "",
"listObjID": "CImULW8LTV",
"lname": "",
"nickname": "",
"objectId": "qHAjGpfqP6",
"phone": "1678",
"position": "Data Call Center",
"updatedAt": "2015-06-18T17:34:47.786Z"
}
]}

[adisak1618]

i think, it because response time from jquery to get data.

[brian-cruickshank]

I think it's because you're using 'this' inside your callback function.
Try the following:

var _self = this;

$.get('src/Persons.json',function(data){
_self.employees = $.parseJSON(data).results;
console.log(_self.employees);
});

On Wed, Jul 8, 2015 at 12:57 PM, adisak1618 [email protected]
wrote:

i think, it because response time from jquery to get data.

—
Reply to this email directly or view it on GitHub
#2048 (comment).

[adisak1618]

@brian-cruickshank Wowwww!! it work!!!
lot of thank :)

may be i need to read more, why can't use this in callback function

[brian-cruickshank]

'this' in javascript is very different than 'this' in object-oriented
languages. An oversimplified explanation is that 'this' is determined by
the call-site (where the callback function is called from). Putting a
breakpoint in your callback function and evaluating 'this' is one way to
get a feel for it.

I've found the "You Don't Know JS" series of books - "this & Object
Prototypes" and "Scope and Closures" to be worthwhile reading.

Some online links to check into:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Brian

On Wed, Jul 8, 2015 at 2:20 PM, adisak1618 [email protected] wrote:

@brian-cruickshank https://github.com/brian-cruickshank Wowwww!! it
work!!!

lot of thank :)

may be i need to read more, why can't use this in callback function

—
Reply to this email directly or view it on GitHub
#2048 (comment).

[masonlouchart]

I think you can also use the JavaScript Function.bind instead of closure (I prefer this way).

Example:

$.get('src/Persons.json', function(data) {
    this.employees = $.parseJSON(data).results;
    console.log(this.employees);
}.bind(this));

And I think you can close the issue 😉

[adisak1618]

thank you, it's work also @kevinpschaaf