1

I am using Polymer 2 and want to bind data from a local json file. But each time I tried it it is not able to fetch the json file only.

There are 2 ways I have tried to achieve it with:

1) USING 

<iron-ajax url="data/employees.json" handle-as="json" last-response="{{items}}" auto>
</iron-ajax>

Folder Structure:

folder Structure

<iron-list items="{{items}}" as="item">
    <template>
        <div class="item">
            <b>[[item.nickname]]</b>
            <p>[[item.phone]]</p>
        </div>
    </template>
</iron-list>

I have also imported both iron-ajax and iron-list

2) USE $.get to extract data fron json in start and put it in a variable to bind it to view.

<script>
    class IronListClass extends Polymer.Element {
        static get is() {return 'iron-comp'}

        ready() {
            super.ready();
            var that = this;
            // $.get('data/employees.json', function(data) {
            //     that.employees = $.parseJSON(data).results;
            //     console.log(that.employees);
            // });
            $.get('data/employees.json', function(data) {
            this.employees = $.parseJSON(data).results;
            console.log(this.employees);
            }.bind(this));
        }        
    }
    window.customElements.define(IronListClass.is, IronListClass);
</script>

tried with that = this also.

YakovL
  • 7,557
  • 12
  • 62
  • 102
Shivansh Rajolia - HeLleR
  • 610
  • 6
  • 12

1 Answers1

0

You may load the json file as follow example as its working at my app already. 

   <iron-ajax 
            auto 
            url$="{{url}}" 
            handle-as="json" 
            last-response="{{loadedItems}}"
           >
    </iron-ajax>

...

     static get properties() { return { 
        url :{
            type:String,
            value() {return "./data/employees.json"; }
        }

...

    static get observers() { return ['checkJsonFileLoaded(loadedItems)']}

    checkJsonFileLoaded(j) {
       if (j) {
           this.set('items', j);
           console.log(items); //u should see the loaded json file. If so than the problem is iron-list (to publish the result)
       }
    }
Cappittall
  • 3,300
  • 3
  • 15
  • 23
  • Firstly, thanks a lot for your help Still not working can you help me figure out please static get properties() { return { url: { type: String, value() {return "./data/employees.json"} } } } static get observers() { return ['checkJsonFileLoaded(items)']} checkJsonFileLoaded(j) { if (j) { this.set('items', j); console.log(items); } } Gives 404 – Shivansh Rajolia - HeLleR Dec 28 '17 at 22:40
  • Seams you don't have json file at specified path. Check for path or file – Cappittall Dec 29 '17 at 03:34
  • I have provided the folder structure image above in main issue. Can you please provide an alternate path or see If I made a mistake. Also in VSCode when I enter ./data it automatically suggests employee.json. What could be the problem? – Shivansh Rajolia - HeLleR Dec 29 '17 at 12:10
  • JSON is in this format :- [ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" }, { "userId": 1, "id": 2, "title": "qui est esse", "body": "est rerum" } ] – Shivansh Rajolia - HeLleR Dec 29 '17 at 12:13
  • Couldn't find the file. Please attach a full console message or link it as picture. Json format is not the subject yet. Just try to see any result at above console.log message – Cappittall Dec 29 '17 at 13:31