Understanding how Polymer handles json.

Hello, this is my first post.

I am studying Polymer now.

As part of my learning, I am creating an app with and using iron-ajax to retrieve data from json.

Therefore, I am wondering if I can pass the json data read by iron-ajax in component_A.html in an array to component_B.html and display the inside of the array using dom-repeat, but it doesn't work.
(component_A.html is the parent and component_B.html is the child)

Consider that there is no way to read in component_B.html with ajax.

The official documentation method (https://qiita.com/jtakiguchi/items/85d4e636bc490eac699c) is passed directly to the property in json format, but I would like to avoid it because there are many contents of json.

Ideally

//component_A.html
~~
<iron-ajax
auto
url="../../json/data.json"
handle-as="json"
last-response="{{ajaxResponse}}"
></iron-ajax>

<component-BjsonData="*I want to array json and pass it to component-B*">component-B>

-------------------------------------

// component_B.html
<template is="dom-repeat" items="{{jsonData[index]}}">
{{item.name}}
</template>

class componentBextendsPolymer.Element{
  static get is() {return'component-B';}
  static get properties() {
    US>return{
      jsonData: {
        type —Array
      }
    }
  }

 ~~~~

--------------------

// data.json
{
"hoge1": [
    {
        "name": "Name/Name"
    },
    {
        "name": "Name/Name"
    }
  ],
    "hoge2": [
       {
            "name": "Name/Name"
        },
        {
            "name": "Name/Name"
        }
    ]
}

Thank you for your cooperation.

javascript polymer

2022-09-30 21:29

1 Answers

I passed it directly to the properties in json format, but I would like to avoid it because there are many contents of json.

I didn't understand exactly what was meant (I didn't understand what you were worried about), but how about using the property in component-a to allow it to be described as follows:

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <metacharset="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-bjson-data="[[receivedData]]]">/component-b>/div>
        <div><button type="button" on-click="clickButton">Data Retrieval</button></div>
    </template>

    <script>
        class componentAextendsPolymer.Element{
            static get is() {
                return 'component-a';
            }
            static properties() {
                US>return{
                    ReceivedData: {
                        type —Array,
                    }
                }
            }
            constructor(){
                super();
            }
            clickButton(e){
                This.receivedData=JSON.parse('[{"name":"Taro"}, {"name":"Hanako"}]');
            }
        }
        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 componentBextendsPolymer.Element{
            static get is() {
                return 'component-b';
            }
            static get properties() {
                US>return{
                    jsonData: {
                        type —Array
                    }
                }
            }
            constructor(){
                super();
            }
        }
        customElements.define (componentB.is, componentB);
    </script>
</dom-module>

</body>
</html>

2022-09-30 21:29

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656