How to iterate over the list in lightning web components

This blog post will explain "How to iterate over list in lightning web components".

listdemolwc.html

<template>

    <lightning-card>

        <table class="slds-table slds-table_cell-buffer slds-table_bordered">

            <thead>

              <tr class="slds-line-height_reset">

                <th class="" scope="col">

                  <div class="slds-truncate" title="Key">Account Name</div>

                </th>

                <th class="" scope="col">

                  <div class="slds-truncate" title="Value">Account Description</div>

                </th>

            </tr>

        </thead>

        <tbody>

            <template for:each={accountsdata.data} for:item="item" for:index="index">

                <tr key={item.id}>

                    <th scope="col">

                     {item.Name}

                    </th>

                    <th scope="col">

                      {item.Description}

                    </th>

                </tr>

            </template>

        </tbody>

        </table>

    </lightning-card>

  </template>

listdemolwc.js

/* eslint-disable no-unused-vars */

/* eslint-disable no-alert */

/* eslint-disable no-console */

/* eslint-disable guard-for-in */

/* eslint-disable vars-on-top */

import { LightningElement, track, wire } from 'lwc';

import getDataFromApex from '@salesforce/apex/listapexcontroller.methodName';

export default class listdemolwc extends LightningElement {

@wire(getDataFromApex) accountsdata;

}

listapexcontroller.cls

public with sharing class listapexcontroller {

    @AuraEnabled(cacheable=true)

    public static list<Account> methodName(){

        list<Account> acclist=new list<Account>();

        acclist=[SELECT id,Name,Description from Account];

        return acclist;

    }

    public listapexcontroller() {

    }

}

lightningapp.app

<aura:application extends="force:slds">

<c:listdemolwc></c:listdemolwc>

</aura:application>