CODEWITHSUNDEEP
jsonpolymerlocal
S2K
S2K

Reputation: 97

Reading a local json file in polymer 1.0

I want to read a json file which is present locally in my system, in my polymer element. Currently i have put the json structure in task property of my element( as a first step).I am using 'dom-repeat' to parse through the json. But still cannot see anything in output.

<ul>
  <template is="dom-repeat" items="{{items}}">
    <li><span>{{item}}</span></li>
  </template>
  <template is="dom-repeat" tasks="{{task}}">
    <li><span>{{task.task.name}}</span></li>
  </template>
</ul>

Above is my !-template-! of the polymer element. Where i am trying to read an array i.e {{items}} and a json i.e {{task}}

Below is the script :

<script>
(function() {
  'use strict';

  Polymer({
    is: 'my-list',

    properties: {
      items: {
        type: Array,
        notify: true
      },
      task:{
        type: Array,
        value: function () { return []; } // Default value
      }
    },

    ready: function() {
      this.items = [
        'Responsive Web App boilerplate',
        'Iron Elements and Paper Elements',
        'End-to-end Build Tooling (including Vulcanize)',
        'Unit testing with Web Component Tester',
        'Routing with Page.js',
        'Offline support with the Platinum Service Worker Elements'
      ];
      this.task=[{
         "task": {
            "name": "Fan",
            "rules": [{
                     "name": "Check Blades",
                      "id": "1",
                      "steps": [{

                          "name": "Check motor",
                          "operator": "OR",
                          "number": "1",
                          "substeps": [{

                                "name": "SubStep1",
                                "function": "code",
                                "expression": "(FAULT_CODE) ==    {err05,err07,err06}",
                                "number": "1",
                                "timeperiod": "86400000"
                             }]
                        }]
                    }]
               }
        }]; 
      } 
  });
})();

I am able to see the array content i.e this.items but not the json contents. COuld anyone tell me where am I going wrong ? Below is the screenshot of the output where you can see the {{items}} but no {{task}} details.

screenshot of the output

Upvotes: 1

Views: 1572

Answers (2)

Derick
Derick

Reputation: 1

this.task is an array and so you'd need to use a computed binding to access its values.

See the relevant section in the docs for more info on how to do this.

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657148

The browser doesn't allow to read files that are locally on your system. The only thing you can do is to provide a file input that allows to choose files using a file picker and then read them from there. You can read them from your local system if the web server runs on your local system and serves that file to clients.

Upvotes: 0

Related Questions