To anyone who is interested. I used iron-ajax and store my query to a JSON file to bypass this problem. Otherwise, no matter what I did can never pass the array checking method inside "iron-list". Hope one day there is an easier solution.
Thanks again to both Daniel and Arthur for their professional support. Roger [email protected]於 2016年12月15日星期四 UTC+8下午2時51分23秒寫道： > > Hi Arthur, > > Thank you so much for pointing out the problem. It is clear now why my > data cannot work on <iron-list> call. My data is sitting in the main > document and I used the res.render('post', {title:'Title', posts : items }) > call to pass it to my client side. As result, it always pass as an > attribute. Btw, I am running Express with EJS as you said :) > > Now I tried your method using DOM binding. The error I received is > "Uncaught ReferenceError: posts is not defined(…)", which is pointed to the > 'posts' object called by javascript below. I guess you cannot access a > server data directly unless I do this <%=posts%> and assign it back to > 't.posts'. But this will return the string attribute again which is > something I don't want to do. Any suggestion? > > <script> > var t = document.querySelector('template[is=dom-bind]'); > t.posts = posts; > </script> > > To answer your last question, I have double confirmed that my 'posts' is > an instance of "Array" type and it's a type of "object". Thanks again. > > posts instanceof Array > => true > typeof posts[0] > => "object" > > BR/Roger > > arthure於 2016年12月15日星期四 UTC+8上午8時19分24秒寫道： >> >> Hi Roger, >> >> How exactly are you trying to get data into the element? From the comment >> about <%= posts %>, it sounds like you're using some kind of template >> processing system? Express with EJS maybe? >> >> Is the iron-list element inside another element? Inside a dom-bind >> template? Or sitting in the main document? Polymer data binding only works >> in the first two places, not in the main document. >> >> From the error, it appears that the iron-list element is getting an >> `items` value set as an *attribute*, not a property. That would be >> consistent with >> putting this in the main document: >> >> <iron-list items="[[posts]]"> >> >> Iron-list sees items attribute set to the literal string "[[posts]]". It >> tries to parse it as JSON, and sees "[[posts]]" which isn't valid JSON. >> >> Instead, you could do something like this: >> >> <template is="dom-bind"> >> <iron-list id="list" items="[[posts]]"> >> <template> >> ... >> </template> >> </iron-list> >> </template> >> >> <script> >> var t = document.querySelector('template[is=dom-bind]'); >> t.posts = posts; >> </script> >> >> Here, you're setting the posts property on the dom-bind. That property is >> data bound to the items *property* on the iron-list. >> >> Or if you're really not going to use any other elements, you could go >> dead simple. >> >> <iron-list id="list"> >> ... >> </iron-list> >> >> <script> >> var list = document.getElementById('list'); >> list.items = posts; >> </script> >> >> Here, you're simply imperatively setting the lists items property. >> >> Both of these assume that you have, in posts, a *JavaScript array of >> objects*. Not a JSON string. In other words: >> >> posts instanceof Array >> => true >> typeof posts[0] >> => "object" >> >> The output in your previous email suggests that you've actually got an >> array of _strings_ where each string is a JSON object. That's probably not >> what you want, either. >> >> Hope that helps. >> Arthur >> >> >> >> On Tue, Dec 13, 2016 at 7:18 PM, <[email protected]> wrote: >> >>> Hi Daniel, >>> >>> Thank you for pointing out the original problem. However, now I can be >>> sure that my data type is an array. The typeof posts showing on console >>> display as following: >>> >>> object [ '{"Name":"aaa","Address":"bbb","Phone":"1111"}', >>> '{"Name":"ccc","Address":"ddd","Phone":"2222"}', >>> '{"Name":"eee","Address":"fff","Phone":"3333"}' ] >>> >>> This array object still fails when passing into <iron-list> tag. Looking >>> at the error handling below where it fails, it has something to do with the >>> JSON parser not getting the correct data format assuming 'value' is passed >>> with my 'posts' array. But as you can see and confirm above, the 'posts' >>> data element format should meet the JSON parse standard unless there is >>> something else i overlooked. Thanks. >>> >>> case Array: >>> try { >>> value = JSON.parse(value); >>> } catch (x) { >>> value = null; >>> console.warn('Polymer::Attributes: couldn`t decode Array as JSON'); >>> } >>> break; >>> >>> BR/Roger >>> >>> Daniel Llewellyn於 2016年12月13日星期二 UTC+8下午10時00分11秒寫道： >>>> >>>> >>>> >>>> On Tue, 13 Dec 2016 at 03:49 <[email protected]> wrote: >>>> >>>>> Hi Daniel, >>>>> >>>>> And the console log will show my posts data as a type string >>>>> representation of my array strings. Thanks. >>>>> >>>>> string [{"Name":"aaa","Address":"bbb","Phone":"1111"}, >>>>> {"Name":"ccc","Address":"ddd","Phone":"2222"}, >>>>> {"Name":"eee","Address":"fff","Phone":"3333"}] >>>>> >>>> >>>> OK, that's your problem. `<iron-list>` takes an array, in the `items` >>>> property, not a string. You need to change your `posts` variable to >>>> contain >>>> an array, or use a different variable which does contain an array. >>>> >>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>> --- >>> You received this message because you are subscribed to the Google >>> Groups "Polymer" group. >>> To unsubscribe from this group and stop receiving emails from it, send >>> an email to [email protected]. >>> To view this discussion on the web visit >>> https://groups.google.com/d/msgid/polymer-dev/dd71a410-1dce-4fca-85ec-e52150623c59%40googlegroups.com >>> >>> <https://groups.google.com/d/msgid/polymer-dev/dd71a410-1dce-4fca-85ec-e52150623c59%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/56f5b334-bca2-4bf9-b53d-03e51a8e4f66%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
