{"action":"created","issue":{"url":"https://api.github.com/repos/firebase/polymerfire/issues/229","repository_url":"https://api.github.com/repos/firebase/polymerfire","labels_url":"https://api.github.com/repos/firebase/polymerfire/issues/229/labels{/name}","comments_url":"https://api.github.com/repos/firebase/polymerfire/issues/229/comments","events_url":"https://api.github.com/repos/firebase/polymerfire/issues/229/events","html_url":"https://github.com/firebase/polymerfire/issues/229","id":233179746,"number":229,"title":"firebase-query element can't process an array to process it","user":{"login":"jperera84","id":13193138,"avatar_url":"https://avatars0.githubusercontent.com/u/13193138?v=3","gravatar_id":"","url":"https://api.github.com/users/jperera84","html_url":"https://github.com/jperera84","followers_url":"https://api.github.com/users/jperera84/followers","following_url":"https://api.github.com/users/jperera84/following{/other_user}","gists_url":"https://api.github.com/users/jperera84/gists{/gist_id}","starred_url":"https://api.github.com/users/jperera84/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jperera84/subscriptions","organizations_url":"https://api.github.com/users/jperera84/orgs","repos_url":"https://api.github.com/users/jperera84/repos","events_url":"https://api.github.com/users/jperera84/events{/privacy}","received_events_url":"https://api.github.com/users/jperera84/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-06-02T13:15:49Z","updated_at":"2017-06-02T15:00:12Z","closed_at":null,"body":"<!-- Instructions: https://github.com/firebase/polymerfire/CONTRIBUTING.md#filing-issues -->\r\n### Description\r\n<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->\r\nI\"m using the element `firebase-query` to interact with Firebase Realtime Database, but I'm having issues to get the list. The feature that I'm trying to implement is that I need to get from Firebase Database the List of Categories, but I need to process that list before to use a `dom-repeat` template to stamp an element on the page.\r\nTo solve that I tried to use an observer in the category property. This is the element that I created:\r\n\r\n```\r\n       <firebase-query\r\n            id=\"query\"\r\n            path=\"/Categories\"\r\n            data=\"{{categories}}\">\r\n        </firebase-query>\r\n        <template is=\"dom-repeat\" items=\"{{categories}}\" as=\"cat\">\r\n            <div class=\"container\">\r\n                <span class=\"text-subtitle\">[[cat.name]]</span>\r\n                <div class=\"card-container\">\r\n                </div>\r\n            </div>\r\n        </template>\r\n    </template>\r\n\r\n    <script>\r\n        class MyMainCategories extends Polymer.Element {\r\n            static get is() { return 'my-maincategories'; }\r\n            static get properties() {\r\n                return {\r\n                    categories:{\r\n                        type: Object,\r\n                        notify: true,\r\n                        value: function() { return []; },\r\n                        observer: '_dataChanged'\r\n                    }\r\n                };\r\n            }\r\n            constructor() {\r\n                super();\r\n            }\r\n            ready() {\r\n                super.ready();\r\n                Polymer.RenderStatus.afterNextRender(this, function() {\r\n                });\r\n            }\r\n            _dataChanged () {\r\n                // do something when the query returns values\r\n                if(this.categories.length > 0){\r\n                    console.log(\"Now it change\");\r\n                }\r\n            }\r\n        }\r\n        window.customElements.define(MyMainCategories.is, MyMainCategories);\r\n    </script>\r\n```\r\n\r\n### Expected outcome\r\n\r\n<!-- Example: The page stays the same color. -->\r\nAt the moment where the property `categories` get values the `console.log(\"Now it change\");` should be appear on the console. \r\n\r\n### Actual outcome\r\n\r\n<!-- Example: The page turns pink. -->\r\nThe `query` object is working because I was able to stamp the categories on the page with the `dom-repeat` template.\r\nBut the observer method: `_dataChanged ` is fire actually twice but debugging this method I was not able to get never the `categories` array with values, that's why I could not process the list.\r\n\r\n### Browsers Affected\r\n<!-- Check all that apply -->\r\n- [x ] Chrome\r\n"},"comment":{"url":"https://api.github.com/repos/firebase/polymerfire/issues/comments/305813288","html_url":"https://github.com/firebase/polymerfire/issues/229#issuecomment-305813288","issue_url":"https://api.github.com/repos/firebase/polymerfire/issues/229","id":305813288,"user":{"login":"mbleigh","id":1022,"avatar_url":"https://avatars3.githubusercontent.com/u/1022?v=3","gravatar_id":"","url":"https://api.github.com/users/mbleigh","html_url":"https://github.com/mbleigh","followers_url":"https://api.github.com/users/mbleigh/followers","following_url":"https://api.github.com/users/mbleigh/following{/other_user}","gists_url":"https://api.github.com/users/mbleigh/gists{/gist_id}","starred_url":"https://api.github.com/users/mbleigh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mbleigh/subscriptions","organizations_url":"https://api.github.com/users/mbleigh/orgs","repos_url":"https://api.github.com/users/mbleigh/repos","events_url":"https://api.github.com/users/mbleigh/events{/privacy}","received_events_url":"https://api.github.com/users/mbleigh/received_events","type":"User","site_admin":false},"created_at":"2017-06-02T15:00:12Z","updated_at":"2017-06-02T15:00:12Z","body":"What if instead you do:\n\n    observers: ['_categoriesChanged(categories.*)']\n\nIn your element?\n\nOn Fri, Jun 2, 2017, 6:15 AM Jose Perera Morales <notifications@github.com>\nwrote:\n\n> Description\n>\n> I\"m using the element firebase-query to interact with Firebase Realtime\n> Database, but I'm having issues to get the list. The feature that I'm\n> trying to implement is that I need to get from Firebase Database the List\n> of Categories, but I need to process that list before to use a dom-repeat\n> template to stamp an element on the page.\n> To solve that I tried to use an observer in the category property. This is\n> the element that I created:\n>\n>        <firebase-query\n>             id=\"query\"\n>             path=\"/Categories\"\n>             data=\"{{categories}}\">\n>         </firebase-query>\n>         <template is=\"dom-repeat\" items=\"{{categories}}\" as=\"cat\">\n>             <div class=\"container\">\n>                 <span class=\"text-subtitle\">[[cat.name]]</span>\n>                 <div class=\"card-container\">\n>                 </div>\n>             </div>\n>         </template>\n>     </template>\n>\n>     <script>\n>         class MyMainCategories extends Polymer.Element {\n>             static get is() { return 'my-maincategories'; }\n>             static get properties() {\n>                 return {\n>                     categories:{\n>                         type: Object,\n>                         notify: true,\n>                         value: function() { return []; },\n>                         observer: '_dataChanged'\n>                     }\n>                 };\n>             }\n>             constructor() {\n>                 super();\n>             }\n>             ready() {\n>                 super.ready();\n>                 Polymer.RenderStatus.afterNextRender(this, function() {\n>                 });\n>             }\n>             _dataChanged () {\n>                 // do something when the query returns values\n>                 if(this.categories.length > 0){\n>                     console.log(\"Now it change\");\n>                 }\n>             }\n>         }\n>         window.customElements.define(MyMainCategories.is, MyMainCategories);\n>     </script>\n>\n> Expected outcome\n>\n> At the moment where the property categories get values the console.log(\"Now\n> it change\"); should be appear on the console.\n> Actual outcome\n>\n> The query object is working because I was able to stamp the categories on\n> the page with the dom-repeat template.\n> But the observer method: _dataChanged is fire actually twice but\n> debugging this method I was not able to get never the categories array\n> with values, that's why I could not process the list.\n> Browsers Affected\n>\n>    - [x ] Chrome\n>    - Firefox\n>    - Safari 9\n>    - Safari 8\n>    - Safari 7\n>    - Edge\n>    - IE 11\n>    - IE 10\n>\n> —\n> You are receiving this because you are subscribed to this thread.\n> Reply to this email directly, view it on GitHub\n> <https://github.com/firebase/polymerfire/issues/229>, or mute the thread\n> <https://github.com/notifications/unsubscribe-auth/AAAD_kGN1RXtOEWCgrHsoZBkr9OWHqVXks5sAAsFgaJpZM4NuRLQ>\n> .\n>\n"}}
{"actor":{"display_login":"mbleigh"}}