1

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

今私は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の中身が多いためこちらは避けたいです。

理想系として

//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": "名前名前"
        }
    ]
}

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

1 件の回答 1

0

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

の意図するところが正確に理解できなかった(何を懸念されているのか分からなかった)のですが、component-aプロパティを介して次のように記述できるようにするのはどうでしょうか。

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

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

2
  • サンプルコードについて、1ファイルにまとめてしまったのでFirefoxでは実行時エラーになってしまいました(参考)。Google Chromeでは私の想定通りの結果となっています。 2018年1月18日 17:58
  • ご回答ありがとうございます。 おかげさまで解決しました。
    – poyopoyo
    2018年1月19日 2:52

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。