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