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, <hsi...@gmail.com <javascript:>> 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 <hsi...@gmail.com> 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 polymer-dev...@googlegroups.com <javascript:>. >> 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 polymer-dev+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/b035d4dd-2a0c-476f-a7c3-80104fdb2cb6%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.