

初めまして、初投稿です。

今私はPolymerを勉強しています。

学習の一環としてとアプリを作成しており、iron-ajaxを使用してjsonからデータを取得しています。

そこでcomponent_A.html内でiron-ajaxで読み込んだjsonデータをcomponent_B.htmlに配列で渡してdom-
repeatを使って配列内を表示できないかと考えているのですが上手く行きません。  
(component_A.htmlが親、component_B.htmlが子の関係です)

component_B.html内でajaxで読み込むと言う方法は無しと考えてください。

公式ドキュメントの方法( <https://qiita.com/jtakiguchi/items/85d4e636bc490eac699c>
)だとプロパティに直接json形式で渡しているのですが、jsonの中身が多いためこちらは避けたいです。

理想系として

[code]

    //component_A.html
    ~~
    <iron-ajax
    auto
    url="../../json/data.json"
    handle-as="json"
    last-response="{{ajaxResponse}}"
    ></iron-ajax>
    
    <component-B jsonData="*jsonを配列にしてcomponent-Bに渡したい*"><component-B>
    
    -------------------------------------
    
    //component_B.html
    <template is="dom-repeat" items="{{jsonData[index]}}">
    {{item.name}}
    </template>
    
    class componentB extends Polymer.Element {
      static get is() { return 'component-B'; }
      static get properties() {
        return {
          jsonData: {
            type:Array
          }
        }
      }
    
     ~~~~
    
    --------------------
    
    //data.json
    {
    "hoge1": [
        {
            "name": "名前名前"
        },
        {
            "name": "名前名前"
        }
      ],
        "hoge2": [
           {
                "name": "名前名前"
            },
            {
                "name": "名前名前"
            }
        ]
    }
    
[/code]

以上、よろしくお願いします。


CC BY-SA 3.0
2018-01-18T12:27:14.710
41064
2018-01-18T17:10:27.813
27046
question
javascript polymer
Polymerでのjsonの扱いについて。


> プロパティに直接json形式で渡しているのですが、jsonの中身が多いためこちらは避けたいです。

の意図するところが正確に理解できなかった(何を懸念されているのか分からなかった)のですが、`component-a`の[プロパティを介して](https://qiita.com/jtakiguchi/items/60f877d907e3d1fd51af#%E3%82%BF%E3%83%BC%E3%82%B2%E3%83%83%E3%83%88%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%B8%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89)次のように記述できるようにするのはどうでしょうか。

[code]

    <component-b json-data="[[receivedData]]"></component-b>
    
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <base href="https://polygit.org/components/">
        <script src="webcomponentsjs/webcomponents-lite.js"></script>
        <link rel="import" href="polymer/polymer.html">
        <link rel="import" href="polymer/polymer-element.html">
        <link rel="import" href="polymer/lib/elements/dom-repeat.html">
    </head>
    <body>
    <component-a></component-a>
    
    <dom-module id="component-a">
    
        <template>
            <div><component-b json-data="[[receivedData]]"></component-b></div>
            <div><button type="button" on-click="clickButton">データ取得</button></div>
        </template>
    
        <script>
            class componentA extends Polymer.Element {
                static get is() {
                    return 'component-a';
                }
                static properties() {
                    return {
                        receivedData: {
                            type: Array,
                        }
                    }
                }
                constructor() {
                    super();
                }
                clickButton(e) {
                    this.receivedData = JSON.parse('[{"name": "太郎"},{"name": "花子"}]');
                }
            }
            customElements.define(componentA.is, componentA);
        </script>
          
    </dom-module>
    
    <dom-module id="component-b">
        <template>
            <template is="dom-repeat" items="{{jsonData}}">
                <span>{{item.name}}</span>
            </template>
        </template>
    
        <script>
            class componentB extends Polymer.Element {
                static get is() {
                    return 'component-b';
                }
                static get properties() {
                    return {
                        jsonData: {
                            type: Array
                        }
                    }
                }
                constructor() {
                    super();
                }
            }
            customElements.define(componentB.is, componentB);
        </script>
    </dom-module>
    
    </body>
    </html>
[/code]


CC BY-SA 3.0
2018-01-18T17:10:27.813
41067
2018-01-18T17:10:27.813
2808
41064
answer