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] <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 <[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] <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 [email protected].
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.
