CODEWITHSUNDEEP
stenciljs
Vasantha Naidu Pechetti
Vasantha Naidu Pechetti

Reputation: 7

Dynamic Unorderlist web component generate using stencilJS

Using stenciljs dynamically generate nesting unordered <ul><li>...</li></ul> list, so i and giving input as a Obj={} i am getting some issues. Here is my code below Please help me on this...

1. index.html

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <title>Stencil Component Starter</title> 
  <script src="/build/mycomponent.js"></script>

</head>
<body>   
  <list-component list-object='[
  {title: "Point", children: [
      {title: "Point"},
      {title: "Point"},
      {title: "Point"},
      {title: "Point", children: [
          {title: "Point"},
          {title: "Point"},
          {title: "Point"}
      ]}
  ]},
  {title: "Point", children: [
      {title: "Point"},
      {title: "Point", children: [
          {title: "Point"},
          {title: "Point"},
          {title: "Point"}
      ]},
      {title: "Point"}
  ]},
]' > </list-component>  
</body>
</html>

ISSUE: I am passing nested object to the custom web component. In this list.tsx file i am facing problem while passing arguments to the function buildList("?","?")...?

2. list.tsx

import { Component, Prop, State, Watch, Element } from '@stencil/core';


@Component({
    tag:'list-component',
    styleUrl:'./list-component.css' 
})

export class ListComponent{

    @State() idName: string;   
    @Prop() listObject: string;
    @Element() flashElement: HTMLElement;   

    private ulContent: HTMLElement;

    componentWillLoad() { 
        this.ulContent  = this.flashElement.querySelector('.ul-content');
        this.buildList(this.ulContent,this.listObject);  
    }


    @Watch('listObject') 
    buildList(parentElement, listObject){ 
        console.log(listObject);
        var i, l, list, li, ul1;
        if( !listObject || !listObject.length ) { return; } 
        ul1 = document.createElement('ul');
        list = parentElement.appendChild(ul1);
        for(i = 0, l = listObject.length ; i < l ; i++) {
            li = document.createElement('li');
            li.appendChild(document.createTextNode(listObject[i].title)); 
            list.appendChild(li);
            this.buildList(li, listObject[i].children);
        } 
    } 

    render() {
        return ( 
            <div class="ul-content"></div>
        );
    }
}

Upvotes: 0

Views: 1360

Answers (1)

Thomas
Thomas

Reputation: 8859

I see two problems:

1: When Stencil calls @Watch methods it always passes the new and old values as arguments, see https://stenciljs.com/docs/properties#prop-default-values-and-validation. This means you cannot define custom arguments. You could create an additional function which acts as the watcher and then calls buildList:

@Watch('listObject')
listObjectChanged() {
    this.buildList(this.ulContent, this.listObject);
}

2: listObject is a string so you need to JSON.parse it before you can loop over it (and rewrite it so it's valid JSON). Then store that parsed list in a local variable and use it to generate the list. See https://medium.com/@gilfink/using-complex-objects-arrays-as-props-in-stencil-components-f2d54b093e85

There is a much simpler way to render that list using JSX instead of manually creating the list elements:

import { Component, Prop, State, Watch, Element } from '@stencil/core';

@Component({
  tag: 'list-component',
  styleUrl: './list-component.css'
})

export class ListComponent {

  @Element() flashElement: HTMLElement;

  @State() idName: string;
  @Prop() listObject: string;
  @State() list: any[];

  @Watch('listObject')
  listObjectChanged() {
    this.list = JSON.parse(this.listObject);
  }

  componentWillLoad() {
    this.listObjectChanged();
  }

  renderList(list) {
    return list.map(list => <ul>
      <li>{list.title}</li>
      {list.children && this.renderList(list.children)}
    </ul>
    );
  }

  render() {
    return (
      <div class="ul-content">
        {this.renderList(this.list)}
      </div>
    );
  }
}

Hope this helps.

Upvotes: 0

Related Questions