[Polymer Iron-list] Iterate array item of JSON type and keep getting the following error message - Attributes: couldn`t decode Array as JSON

[hsi...@gmail.com]

Hi,

Only few posts about this topic on Stackoverflow so I came here for help. Many people believe it is due to JSON format is incorrect as result of parsing failure. However, I spent quite some time double check to ensure my data format can meet JSON standard. I even verified my data with JSON.parse() and the return result is okay. But putting the same data object on HTML calling iron-list tag simply doesn't work. I believe there is a flaw on the array call itself while the return error message doesn't provide more details. Please someone help me here or I might have give up using this wonderful web element. Thanks.

<iron-list items="[[posts]]" as="item">

      <template>

By using  <%= posts %> tag on my html, I can see the correct representation of my JSON data.

 [{"Name":"aaa","Address":"bbb","Phone":"1111"},{"Name":"ccc","Address":"ddd","Phone":"2222"},{"Name":"eee","Address":"fff","Phone":"3333"}]

[Daniel Llewellyn]

On Mon, 12 Dec 2016 at 10:08 <hsi...@gmail.com> wrote:

Hi,

Only few posts about this topic on Stackoverflow so I came here for help. Many people believe it is due to JSON format is incorrect as result of parsing failure. However, I spent quite some time double check to ensure my data format can meet JSON standard. I even verified my data with JSON.parse() and the return result is okay. But putting the same data object on HTML calling iron-list tag simply doesn't work. I believe there is a flaw on the array call itself while the return error message doesn't provide more details. Please someone help me here or I might have give up using this wonderful web element. Thanks.

<iron-list items="[[posts]]" as="item">

      <template>

Please show where you get the posts variable from, where you assign it into the variable called posts, etc. It is unclear what this variable looks like without those details. Also beneficial would be a `console.log(typeof posts, posts);` output to verify what it contains.

By using  <%= posts %> tag on my html, I can see the correct representation of my JSON data.

I don't know what <%= posts %> means, but it definitely is not Polymer-enhanced-HTML or plain-HTML.

 [{"Name":"aaa","Address":"bbb","Phone":"1111"},{"Name":"ccc","Address":"ddd","Phone":"2222"},{"Name":"eee","Address":"fff","Phone":"3333"}]

That data looks fine.

Dan. 

[hsi...@gmail.com]

Hi Daniel,

Thank you so much for taking the time helping me look into this problem. To answer your first question, I have a post.js class running on server side which will render the items list (in JSON format as I shown previously) on the posts object. The code is shown as following.

exports.list = function(req, res){

scan(function(items){

res.render('post', {title:'Title', posts : items });

});

};

BR/Roger

Daniel Llewellyn於 2016年12月13日星期二 UTC+8上午1時42分53秒寫道：

[hsi...@gmail.com]

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"}]

BR/Roger

hsi...@gmail.com於 2016年12月13日星期二 UTC+8上午11時42分28秒寫道：

[Daniel Llewellyn]

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.

[hsi...@gmail.com]

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秒寫道：

[hsi...@gmail.com]

And if I use "JSON.parse()" call to parse the first element of my 'posts' object, I received the correct result without error.

console.log('JSON parser: ', JSON.parse(posts[0]));

OUTPUT

JSON parser:  { Name: 'aaa',

  Address: 'bbb',

  Phone: '1111''}

This is why I suspected the problem exist inside the <iron-list> call when iterate thru array of string objects.

BR/Roger

hsi...@gmail.com於 2016年12月14日星期三 UTC+8上午11時18分57秒寫道：

[Arthur Evans]

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

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+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/dd71a410-1dce-4fca-85ec-e52150623c59%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[hsi...@gmail.com]

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秒寫道：

To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

[hsi...@gmail.com]

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

hsi...@gmail.com於 2016年12月15日星期四 UTC+8下午2時51分23秒寫道：

[almabe...@gmail.com]

Hey Roger.

I have the warning when using predix-ui component px-vis-timeseries. Precisely I have JSON which comes from InfluxDB, so I can't bind it to view (by the way I'm using Angular 6).

So far I've tried:

1. [attr-chart-data] = "data" ==> Polymer::Attributes: couldn`t decode Array as JSON ;

2. chart-data = "{{ data }}" ==> Nothing happens. No one warning or error ;

Here what I have in app.component.html:

<px-vis-timeseries id="ts1" 

prevent-resize 

width="950" height="500" 

register-location="side" 

enable-tooltip="true" tooltip

include-all-series 

selection-type="x" 

chart-data = "{{ arr }}"

series-config ='{"y":{"type": "line","name": "series1","x": "x","y": "y"}}' 

x-axis-config='{"title": "Date"}'

y-axis-config='{"title": "y1"}'>

</px-vis-timeseries>

JSON:

data = [ 

{"x":1530426560000,"y":179.46},

{"x":1530426570000,"y":179.58},

{"x":1530426580000,"y":179.58},

{"x":1530426590000,"y":179.6},

{"x":1530426600000,"y":179.52},

{"x":1530426610000,"y":179.56},

{"x":1530426620000,"y":179.52},

{"x":1530426630000,"y":179.52}

];

Hope You can help.

Thanks in advance, Galym

воскресенье, 18 декабря 2016 г., 19:18:44 UTC+6 пользователь hsi...@gmail.com написал: