2016-05-15 12 views
1

自分のシステムにローカルに存在するjsonファイルをポリマー要素で読みたいと思います。現在、私は要素のタスクプロパティにjson構造を置いています(最初のステップとして)。私はjsonを解析するために 'dom-repeat'を使用しています。しかし、まだ出力で何も見ることができません。ポリマー1.0でローカルのjsonファイルを読む

<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> 

上記はmy!-template-!です。のポリマー成分を含む。私は、配列を読みしようとしていますどこすなわち{{アイテム}}とJSONすなわち{{タスク}}以下

はスクリプトです:

<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" 
          }] 
         }] 
        }] 
       } 
     }]; 
     } 
    }); 
})(); 

私は配列を見ることができていますコンテンツie this.itemsではなく、jsonのコンテンツです。誰かが私に間違っていると教えてくれますか?以下は出力のスクリーンショットで、{{items}}は表示されますが{{task}}の詳細は表示されません。

screenshot of the output

答えて

0

ブラウザは、システム上でローカルにあるファイルを読み取ることはできません。あなたが行うことができる唯一のことは、ファイルピッカーを使用してファイルを選択し、そこからファイルを読み取ることができるファイル入力を提供することです。 Webサーバーがローカルシステム上で実行され、そのファイルをクライアントに提供する場合は、ローカルシステムからそれらを読み取ることができます。

+0

ありがとうございます!あなたのポイントを得ました。しかし、現在私はどこからでもそれを取得していません。それは私の財産、すなわち{this.task}にありますが、なぜ私はそれを解析できませんか?何か案が ? – Shikha

0

this.taskは配列なので、計算されたバインディングを使用してその値にアクセスする必要があります。

この方法の詳細については、docsの関連セクションを参照してください。

関連する問題