I am getting the below error.

enter image description here

below is my complete Code:

HTML markup:

        <lightning-card title="Contact List" icon-name="Standard:contact">
            <lightning-layout vertical-align="center">
                <lightning-layout-item padding="around-small">
                    <lightning-input label="Find Contact" value={searchKey} onchange={handleChange}>

            <lightning-layout vertical-align="center">
                        <template for:each={contacts.data} for:item="conatct">
                    <lightning-layout-item key={contact.key} item-padding="around-small">
                        <p><lightning-formatted-email value={contact.Email></lightning-formatted-email></p>
                            <p><lightning-formatted-phone value={contact.Phone}></lightning-formatted-phone></p>


import { LightningElement, wire, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactAuraService.getContactList';
export default class createContactDemo extends LightningElement {

    @track searchKey;
    @track contacts;
    @track Objerror;

    @wire(getContactList, {
        name : '$searchKey'
    wiredContact({error, data}){
            this.contacts = data;
            /*eslint-disable no-console */
            console.log('Error', error);
    //Data - Error
    // contacts.data
    // contacts will contain the data and error.
    // contact.data and contact.error

        /*eslint-disable no-console */
        console.log('Value' + event.target.value);
        this.searchKey = event.target.value;


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="contactListDemo">
    <masterLabel>Contact List Demo </masterLabel>

Class :

public with sharing class ContactAuraService {
    public ContactAuraService() {


    public static List<sObject> getContactList(String name){
        String key = '%' + name + '%';
        String Query = 'Select Id, Name, Email, Phone from Contact Where Name LIKE : key' ;
        return Database.query(query); 

    public static List<sObject> getAccountList(String name){
        String key = '%' + name + '%';
        String Query = 'Select Id, Name, Industry from Account Where Name LIKE : key';
        return Database.query(query);         

The problem is that the view tries to browse a list, namely contacts.data, before the Apex method is called by the wire service.

The variable being undefined, it raises the error.

For this reason, it is always necessary to check that the data is present before iterating through a list populated by the wire service.

You just have to add before your iteration:

<template if:true={contacts.data}>
     <template for:each={contacts.data} for:item="contact">

You are returning list of records and assigning them to this.contacts. So you need to use contacts in html instead of contacts.data

<template for:each={contacts} for:item="conatct">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.