Lit-Element data loading error in update-element.js

Question

I have the following element:

import {LitElement, html} from '@polymer/lit-element';
import {SdkArticle} from '../elements/sdk-article/sdk-article.js'

class PraksisView extends LitElement {

    static get properties() {
        return {
            articles: {type: Array},
        };
    }

    constructor() {
        super();
        this.articles = [];
    }

    async firstUpdated() {
        await fetch(`/testData.json`)
            .then(r => r.json())
            .then(async data => {
                this.articles = data.articles;
            });
    }


    render() {
        return html `
          <style>
     .indent-1 {float: left;}
    .indent-1 section {width: 50%; float: left;}
        header {
            display: block;
            height: 50px;
            background-color: #215959;
            color: white;
        }
        .center {
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 50px;
}
        </style>
        <header>
            <h3 class="center">Almen praksis</h3>
        </header>  
        <section class="indent-1">
            <section>                
                <div>
                    <ul>
                        <li>Patientbehandling</li>
                        <li>Klinikdrift</li>
                        <li>Midtkraft</li>
                    </ul>
                </div>
            </section>                
            <section>
         ${this.articles.map(
            article =>
                html`
                <div>
                    <sdk-article data=${article}></sdk-article>
                </div>
            `,
        )}
            </section>
        </section>
`;
    }
}

customElements.define('praksis-view', PraksisView);

As you can see here I load some test data in from testData.json.

Now the other sdk-article:

import {LitElement, html} from '@polymer/lit-element';


class SdkArticle extends LitElement {
    static get properties() {
        return {
            data: {type: Object}
        };
    }

    constructor() {
        super();
        this.data = {};
    }

    render() {
        this.generateHtml();
        return html`
    `;
    }

    generateHtml(){
        console.log(this.data);
    }
}

customElements.define('sdk-article', SdkArticle);

Basically this just checks if the data is there.

When I run this the data is undefined and I get an error:

VM1588:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at fromAttribute (updating-element.js:59)
    at Function._propertyValueFromAttribute (updating-element.js:259)
    at HTMLElement._attributeToProperty (updating-element.js:387)
    at HTMLElement.attributeChangedCallback (updating-element.js:343)
    at AttributeCommitter.commit (parts.js:79)
    at AttributePart.commit (parts.js:111)
    at TemplateInstance.update (template-instance.js:40)
    at NodePart.__commitTemplateResult (parts.js:248)
    at NodePart.commit (parts.js:189)

Can anyone see what the issue is here?

Answer 1

Solution

if you want to pass the actual property on then you need to use the "dot notation".

<sdk-article .data=${article}></sdk-article>

this is basically the same as doing

document.querySelector('sdk-article').data = article;

---

Explanation of issue

In your current code you are setting an attribute.

<sdk-article data=${article}></sdk-article>

which is basically this

document.querySelector('sdk-article').setAttribute('data', article);

Attributes however only accept strings.