function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Farooq Khan 11Farooq Khan 11 

How to get value from a map using key on LWC html?

I am trying to get a value from a map using the key on html in LWC. 
I don't want to iterate whole map but only use a particular key to rereive its corresponnding value from the map on HTML.
Any ideas ?
CharuDuttCharuDutt
Hii Farooq
Try Below Code 
import { LightningElement, wire, track } from 'lwc';
import fetchMapData from '@salesforce/apex/LwcMapCtrl.fetchMapData';

export default class LwcMap extends LightningElement {
    @track mapData= [];

    @wire(fetchMapData)
    wiredResult(result) { 
        if (result.data) {
            
            var conts = result.data;
            for(var key in conts){
                 If(Key == 'Value'){
                 alert("value:"+conts[key] + ' '+ "key:" + key);
               }
            }
        }
    }
}
Please Mark It As Best Answer If It Helps
Thank You!
mukesh guptamukesh gupta
Hi Farooq,

you need to iterate it, please  reffer 
  
<tbody>
                    <template for:each={mapOfValues} for:item="keyValue">
                        <tr key={keyValue.key}>
                            <th scope="col">
                                <div>{keyValue.key}</div>
                            </th>
                            <th scope="col">
                                <div>{keyValue.value}</div>
                            </th>
                        </tr>
                    </template>
                </tbody>

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh 

 
Farooq Khan 11Farooq Khan 11
@mukesh gupta, my requirement is to get a value based upon a particular key, I don't want to iterate over while map and get all values. Something like this :  value = map.get(key) ...basically I want to pass a particular key (and not all keys using itration) to map and get corresponding value.
ravi soniravi soni
hi farooq Khan,
try below code but keep in mind that is only dummy code. if you don't want to iterate lstAccount then simply you can fetch child data in separate variable and use that in Html Iterator like below. 
//Js
var lstAccount = [{'Name' : 'test','Id' : '001255', 'Contacts' : [{'Name' : 'con1','Id' : '00224'},{'Name' : 'con2','Id' : '00225'}]}];
				
//Html
				var lstContact = lstAccount[0].Contacts;

<tbody>
                    <template for:each={lstContact} for:item="keyValue">
                        <tr key={keyValue.Id}>
                            <th scope="col">
                                <div>{keyValue.Id}</div>
                            </th>
                            <th scope="col">
                                <div>{keyValue.Name}</div>
                            </th>
                        </tr>
                    </template>
                </tbody>

let me know if it helps you and don't forget to mark it as best answer if it helps you.
Thank you