Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Anvesh RajuAnvesh Raju 

How to Iterate the JSON Object in lightning components?

Best Answer chosen by Anvesh Raju
Raj VakatiRaj Vakati
Please refer the below sample code . for the test I create a JSON Array Object 

  
<aura:component >
    <aura:attribute name="jsonArray" type="Object[]"     />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <table class="slds-table slds-table--bordered">
        <tbody>
            <aura:iteration items="{!v.jsonArray}" var="row">
                <tr>
                    <td> {!row.color}</td>
                    <td> {!row.value}</td>
                    
                </tr>
            </aura:iteration>
        </tbody>
    </table>
    
</aura:component>
  
({
    doInit : function(component, event, helper) {
        var jsonObj =[
            
            {
                color: "red",
                value: "#f00"
            },
            {
                color: "green",
                value: "#0f0"
            },
            {
                color: "blue",
                value: "#00f"
            },
            {
                color: "cyan",
                value: "#0ff"
            },
            {
                color: "magenta",
                value: "#f0f"
            },
            {
                color: "yellow",
                value: "#ff0"
            },
            {
                color: "black",
                value: "#000"
            }
        ];
        component.set("v.jsonArray", jsonObj);
    }
})



 

All Answers

Raj VakatiRaj Vakati
Please refer the below sample code . for the test I create a JSON Array Object 

  
<aura:component >
    <aura:attribute name="jsonArray" type="Object[]"     />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <table class="slds-table slds-table--bordered">
        <tbody>
            <aura:iteration items="{!v.jsonArray}" var="row">
                <tr>
                    <td> {!row.color}</td>
                    <td> {!row.value}</td>
                    
                </tr>
            </aura:iteration>
        </tbody>
    </table>
    
</aura:component>
  
({
    doInit : function(component, event, helper) {
        var jsonObj =[
            
            {
                color: "red",
                value: "#f00"
            },
            {
                color: "green",
                value: "#0f0"
            },
            {
                color: "blue",
                value: "#00f"
            },
            {
                color: "cyan",
                value: "#0ff"
            },
            {
                color: "magenta",
                value: "#f0f"
            },
            {
                color: "yellow",
                value: "#ff0"
            },
            {
                color: "black",
                value: "#000"
            }
        ];
        component.set("v.jsonArray", jsonObj);
    }
})



 
This was selected as the best answer
David Roberts 4David Roberts 4
Thanks Raj, Your answer helped me with a more complex requirement. I needed to iterate an object with multiple sub items.

Firstly, I found the recommendation (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_attr_types_object.htm) that Map[] should be used instead of Object[].
and found the syntax for using in default: 
<aura:attribute name="people" type="Map[]" 
default = "[{ 
    to: [ { name: 'ToDave', email: 'dave@ToEmail' }, { name: 'ToBob', email: 'bob@ToEmail' }], 
    from: [ { name: 'FromDave', email: 'dave@FromEmail' }], 
    cc: [ { name: 'CcSue', email: 'sue@CcEmail' }, { name: 'CcMary', email: 'mary@CcEmail' }]
 }]"/>

Or, working from your example, to create it in the controller: 
var jsonBigObj = [{ 
     to: [ { name: "cmpToDave", email: "cmpDave@ToEmail" },{ name: "cmpToHilary", email: "cmpHilary@ToEmail" } ], 
     from: [ { name: "cmpFromDave", email: "cmp@fromEmail" } ], 
     cc: [ { name: "cmpCcWendy", email: "cmpWendy@ccEmail" },{ name: "cmpCcCruella", email: "cmpCruella@ccEmail" }]
 }];
component.set("v.people", jsonBigObj);


And to iterate in a table: 
<table class="slds-table slds-table--bordered" title="multi level array"> 
<thead>People</thead> 
<tbody> 
   <aura:iteration items="{!v.people}" var="person"> 

   <aura:iteration items="{!person.to}" var="level2to"> 
      <tr> <td>{!level2to.name}</td><td>{!level2to.email}</td> 
      </tr> 
   </aura:iteration>
   
   <aura:iteration items="{!person.from}" var="level2from"> 
      <tr> <td>{!level2from.name}</td><td>{!level2from.email}</td>
      </tr> 
   </aura:iteration> 

   <aura:iteration items="{!person.cc}" var="level2cc"> 
      <tr> <td>{!level2cc.name}</td><td>{!level2cc.email}</td> 
      </tr> 
   </aura:iteration> 

</aura:iteration> 
</tbody> 
</table>

 
Mohit MathuriyaMohit Mathuriya
Hi,

I am hitting a api which is responding me a Json Array. I am writing the code in Apex class in lightning component.

Apex code:
String op=resp.getBody(); List<Object> result = (List<Object>)JSON.deserializeUntyped(op);
return result;

Helper class:

var returnb = response.getReturnValue(); component.set("v.jsonArray", returnb);

In cmponent:
<aura:attribute name="jsonArray" type="Object[]"/> <aura:if isTrue= "{!not(empty(v.jsonArray))}" >

<table class="slds-table slds-border_left slds-border_right">
<tbody>
<aura:iteration items="{!v.jsonArray}" var="row">
<tr>
<td> {!row.id} </td>

this row.id is not printing & returning an error.
The json response is something like:
[{"id": "wwkj", "name": "loki" }, {"id": "wyht", "name": "ann" }, . . . . ]

Please let me know what's wrong with this.​​​​​​​