Hello, people here I'm going to explain to you how to render the list in LWC. I will create two examples from the hardcode JS object and get the list from the server side.

Let's follow some steps, I will start the local development server. Run this command from a command-line interface.

sfdx plugins:install @salesforce/lwc-dev-server

I was getting an error so I also installed

sudo npm install -g node-gyp

Now, our local development server is up and running. Let me explain to you why we've installed this, using this local development server makes our deployment really fast. It makes our debugging easy cause it will take less to show/ reflect our changes.

Yes, you can deploy your code to developer org or scratch org for the sake of future blogs and testing the new topics we'll use a local development server and when our requirements are all clear and checked then we'll do the final deployment.

Today we'll study two scenarios of For each and Iterators

1. Object from JS

HTML ::>>

<template>
<div style="width: 840px;">
        <lightning-card title="Accounts Name List (JS Object)">
        <ul class="slds-has-dividers_around-space slds-var-p-around_medium">
            <template for:each={accountListObj} for:item="acc">
                <li key={acc.id} class="slds-item"> {acc.name}</li>
            </template>
        </ul>
    </lightning-card>
</div>
</template>

• Iterator -> The iterator variable should be lower-case always.

<template>
    <div>
        <lightning-card title="Accounts Name List (JS Object)">
        <ul class="slds-has-dividers_around-space slds-var-p-around_medium">
            <template iterator:acc={accountListObj}>
                <li key={acc.value.id} class="slds-item"> {acc.value.name}</li>
            </template>
        </ul>
    </lightning-card>
    </div>
</template>

JavaScript ::>>

import { LightningElement,track } from 'lwc';
export default class ForEachIterator extends LightningElement {
    @track accountList = [];
    accountListObj = [
        {
            id: '01',
            name: 'John Smith'
        }, {
            id: '02',
            name: 'Rick Sean'
        }, {
            id: '03',
            name: 'Jim Yang'
        }, {
            id: '04',
            name: 'Richard livingston'
        }, {
            id: '06',
            name: 'Ammy Gilbert'
        }, {
            id: '07',
            name: 'Yograj Singh'
        }, {
            id: '08',
            name: 'Victoria Palmer'
        }, {
            id: '09',
            name: 'Joskhe Higashkhita'
            }
    ]
}

2. List from server-side

HTML::>>

<template>
<div style="width: 840px;">
    <lightning-card title="Accounts Name List (Server Side)">
        <ul class="slds-has-dividers_around-space slds-var-p-around_medium">
            <template for:each={accountListServer} for:item="accServer">
            <li key={accServer.Id} class="slds-item">{accServer.Name}</li>
            </template>
        </ul>
    </lightning-card>
    <lightning-card>
        {error}
    </lightning-card>
</div>
</template>

• Iterator

  <div>
        <lightning-card title="Accounts Name List (Server Side)">
            <ul class="slds-has-dividers_around-space slds-var-p-around_medium">
                <template iterator:accserver={accountListServer} >
                <li key={accserver.value.Id} class="slds-item">{accserver.value.Name}</li>
                </template>
            </ul>
        </lightning-card>
        <lightning-card>
            {error}
        </lightning-card> 
    </div>

JavaScript ::>>

import { LightningElement, track } from 'lwc';
import getIteratorList from '@salesforce/apex/ForEachIteratorLightning.getIteratorList';
export default class ForEachIterator extends LightningElement {
    @track accountListServer = [];
    @track error = '';
    connectedCallback() {
        this.getIteratorListJS();
    }
    getIteratorListJS() {
        console.log('js running ');
        getIteratorList()
            .then(result => {
                console.table(result);
                this.accountListServer = result;
                console.log('UI LIST::>>'+this.accountListServer);
                // this.error = undefined;
            }).catch(result => {
                console.table(result);
                console.log('result');

                this.error = result;
        })
    }

}

Server Side::>>

public inherited sharing class ForEachIteratorLightning {

    @AuraEnabled
    public Static List<Account> getIteratorList(){
        List<Account> accList =  [SELECT Id, Name FROM Account WHERE NOT Name LIKE '%test%' LIMIT 9];
        System.debug('accList::>>'+accList);
        return accList;
    }
}

Here, in Apex code we need to define our method with annotation of @AuraEnabled to import into our LWC.

There are many used cases where we've to use populate our list either by Hardcoding it or getting from the Server Method

You can have this code from --> Git repo

Git was created by Linus Torvalds about 10 years ago. The reason behind creating GIT was he hated doing source control management, imagine your day without version control or source management like, " who coded that and who made changes on that method" Terrible right! so, Linus thought of creating a systematic environment that can take care of changes and code that is made by several of my teammates.

Git has its own learning curve, I faced many problems at the beginning of my programming journey, as nowadays Git is like a global standard like anybody who can code should know Git, and know how to manage code with multiple teammates and should not mess up the whole codebase, cause I've created many issues for my senior teammates but they were very helpful to correct me, and they've explained me the best practices for git, and I'm going to tell you all that.

Repository

Repository or (repo) in Git is a collection of files and folders where your whole codebase is located. You can create Unlimited public/private repositories and can create Unlimited Branches.

Branch

Branch in Git is the same as you're thinking right now I suppose, Let's take an example of a tree and its branches with leaves.

The repository is like a tree where everything happens where fruit will emerge and grow and at the end, it will ripe.

The branch is for different things happening at a different pace, but everything is related to the tree, for example, you cannot expect to have an apple on one branch and mango on another, cause the tree is of the same codebase, either it will have mango or apple.

you can perform different tasks on different branches of the same repository and both the task will eventually be merged into one sample master branch which is the root of all branches

And lastly, Leaves are the people that are connected to that specific repository and you can have an unlimited number of people (leaves) to your branch Repository.

here are some commands that you'll be going to use at the beginning of any project or any codebase. they are in no specific order

\==> Note: The staging area is the area where all the files are ready to be committed

• git clone

 git clone " < URL > "

To clone the global repository on your local machine.

• git config

git config  —global username  “Harshit Saxena”

git config —global.email “harshit@harshitsaxena.com”

This is to tell git who you are your username, email, address, etc. this information is used during your commits.

• git add

git add < filename >

Files that you want to commit to your repository or ready to be staged

 git add --all

• To add all the files to the staging area

•   git add “*.txt”
  

• To add all the text file

•   git add < directory >/
  

• To add the specific directory to be staged

• git commit

commit command is used to send your code to your local repository

• m ==> message

 git commit -m "write your comment here describing your commit"

• git push

•   git push  origin master
  

This is used to push your code from the local repository to the Global repository

• git pull

•   git pull origin master
  

• To get all the code from the Global repository to your local repository

 git status

• To check the status of all the files

git branch

• To check the branch that you are working in

git checkout -b < branchname>

• To make a new branch and switch to a newly created one

git checkout < branchname >

• To change the working branch

git merge

• To merge different branches to the active branch

git log

• To check all the commits logs

git grep " specific content "

• To search into the working directory "this"

---> These are some commands that will be helpful in your git journey, So in the end I must say to make repositories you will mess up many times but you will learn from your mistakes, that is what really counts. Believe me, I've made mistakes on client repositories in the first week of my job, but learning from your mistakes makes you better at anything. So keep on trying new things.

But try making mistakes on your local repository rather than on the client's repository.

You can find my GitHub profile on my Hashnode Profile.

Summary

Git is a very powerful tool for any programmer (experienced / beginner), so I strongly encourage you to get your hands dirty with git. Make a GitHub profile and start coding. Feel free to add your GitHub profile in the comment section. I definitely get back to you with some special tricks that might speed up your process 😉.

I am Harshit Saxena currently working as a salesforce developer. Mostly working on LWC on the community platform. I'm 2x certified: B2B commerce admin and Platform Developer 1. I was not into programming from the beginning But 2 of my seniors recommended me to check out what's salesforce platform is, how salesforce is growing and here I am, Those 2 became my mentors and guided me about do's and don'ts. Programming is intimidating as I am not from a computer science background. Yes, I do not have a degree in computer science! nor any subjects in my degree. I am a graduate with a Bachelor of Science degree.

A fun little story:

How did I get myself into programming before salesforce?

I was trying to improve my grades in mathematics and searching over the web for those silly tips and tricks.

How to improve in mathematics?

So I saw programming can help with your mathematics grades. So Bingo then I decided to do programming, and my end goal is to get better grades in college. I searched where to start, what are programming languages? what I can do with a specific language? So, after spending a whole day I decided to go for JAVA - Yes not python. Java was weigh too complex for a non-programming background student. But I kept on working with problems how to approach them to get optimal solutions.

Problem-solving

It is a skill that one should develop if anybody is trying programming. Then I searched to get better at solving problems. There were many ideas like solving Mathematics equations, That was straight No for me !. Then one of my friend's showed me that he can solve a puzzle - and what was that puzzle, yes it was a rubix cube. A rubix cube seems impossible to me that only a genius can solve and being his friend I know that he is no genius, So is he able to solve? "That was the million-dollar question for me"

So a get up on the Internet and what I did? Yes, How to solve a rubix cube? I gave my heart and soul to it and after many hours of embarrassment and disappointment I mastered it down flat.

What I learnt about solving rubix cube

Solving rubix cube will not make you a better programmer. If you cannot that's fine. It was in my mind that if I am able to achieve that, then I can teach myself something as I am a self-taught programmer. It is a puzzle that forces your brain to think of many possibilities and solutions that you already know, and how to counter those parities if they occur.

Able to teach yourself is an Art.

I came across many kinds of people, some can learn from books some are comfortable with video content some with audio-books, Like content in different mediums. I am a book guy, I like reading books. Particularly I learn from books, PDF's or I should say written documentation. You can get a gist from a video, but for whole and deeper understanding, I suggest going for written or official documentation.

Trailhead

It helped me in those initial stages when I was starting my salesforce journey. It's a great platform for beginners even after 2 years of experience I still visit trailhead for topics that I want to get better at. I highly advise all new salesforce developers to learn from the trailhead. It has a playground where you can write actual code and learn from your mistakes, using trailhead and completing your modules in your domain will skill up and skill easy very fast. I have done it, so can you.

Just make your developer org and start doing your modules.

Prerequisites

According to me, there are not many prerequisites for a salesforce developer or I may say to get an entry-level job. But I can list a few that I've attained before my first job.

(Object Oriented Programming) OOPs concept

It's a very important and very basic prerequisite for any programming related job. There are programming languages that are based on OOPs concept for e.g: C++, Java. As I started programming with Java so I was good with this but still I studied from many resources to get fluent with real-life problems or I may say used cases.

To get familiar with real code I took help from our favorite friend, Yes GitHub. GitHub helped me a lot you should know how to take full leverage of GitHub.

Collections

Collections are used in every other line of code in salesforce, for the Back-End we use Java-based language that is "Apex". The collection is a framework that provides you with the architecture to manipulate data, without collections it's very difficult to code in java. So one should know how to handle and manipulate data using collections. There are many resources and books which can make you an expert in using the correct collection. Some highly used collections are

• List

• Set

• Map

You should know, what are the key differences in these, when to use which, how to change from one to another, which of these collections are interchangeable, and many more.

I have practiced Interview questions on the web. What are the most asked questions? So that you can focus on your weak spots and strengthen those.

Make a good resume

Most of the people I saw are well versed with their technical knowledge but, their resume is not that Impressive. One should pay good attention to what they are sending to those recruiting teams, those HR's are really busy so they just read those heading and main key points.

Practice

You have to practice a lot, I can't stress that enough! Make your Github profile stand out to make commits regularly, So you can show your reviewer that you can build stuff from scratch and you have hands-on experience with those topics.

There is nothing more to say.

Mentor

I must say having a mentor is very beneficial, I had two mentors when I started my journey. Right now I'm working in a different company than before and here also I have two mentors. A mentor will guide you, tell you about the best practices that make you smarter to avoid mistakes, cause believe me the initial stage of the corporate world is really scary and one should be very cautious at every moment.

Salesforce Ohana is wonderful for many months I was unaware of that. To get a gist of what Ohana is, It is a place like a family that work together and have fun together Watch this.

Don't lose any hope.

You will get many opportunities, you just have to be persistent and keep on trying.

I have faced failure many times more than you think but at last " I got in", so will you.