title: How to loop through complex object or array of object
body: <p>I am trying to make an app in react native. I have a object below which comes from firebase and made by push method , I tried foreach and map but failed So post the problem here I am learning it but It has been some days I stuck here</p>
  <pre><code> const order1 = [{
      &quot;-MMp_6FIqEa8ZzrRiYV2&quot;: {
        &quot;orders&quot;:  [
           {
            &quot;avatar&quot;: &quot;https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg&quot;,
            &quot;id&quot;: 1,
            &quot;name&quot;: &quot;Tea&quot;,
            &quot;price&quot;: 7,
          },
        ],
      },
      &quot;-MMp_aLM3BO0zUR4zxdh&quot;:  {
        &quot;orders&quot;:  [
           {
            &quot;avatar&quot;: &quot;https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg&quot;,
            &quot;id&quot;: 2,
            &quot;name&quot;: &quot;Sugar Free Tea&quot;,
            &quot;price&quot;: 12,
          },
           {
            &quot;avatar&quot;: &quot;https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg&quot;,
            &quot;id&quot;: 3,
            &quot;name&quot;: &quot;Tusi tea&quot;,
            &quot;price&quot;: 15,
          },
           {
            &quot;avatar&quot;: &quot;https://s3.amazonaws.com/uifaces/faces/twitter/talhaconcepts/128.jpg&quot;,
            &quot;id&quot;: 4,
            &quot;name&quot;: &quot;Ginger Tea&quot;,
            &quot;price&quot;: 12,
          },
        ],
      },
      &quot;-MMp_huUoxv9Kencff7p&quot;:  {
        &quot;orders&quot;:  [
           {
            &quot;avatar&quot;: &quot;https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg&quot;,
            &quot;id&quot;: 2,
            &quot;name&quot;: &quot;Sugar Free Tea&quot;,
            &quot;price&quot;: 12,
          },
           {
            &quot;avatar&quot;: &quot;https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg&quot;,
            &quot;id&quot;: 3,
            &quot;name&quot;: &quot;Tusi tea&quot;,
            &quot;price&quot;: 15,
          },
           {
            &quot;avatar&quot;: &quot;https://s3.amazonaws.com/uifaces/faces/twitter/talhaconcepts/128.jpg&quot;,
            &quot;id&quot;: 4,
            &quot;name&quot;: &quot;Ginger Tea&quot;,
            &quot;price&quot;: 12,
          },
        ],
      },
    }];
  </code></pre>
  <p>How can i loop through such data and list someting like below</p>
  <pre><code>&lt;ScrollView&gt;
  
                  &lt;Card&gt;
                      &lt;Text&gt;Order Id: MM0mAUoUrs3VzbdZJy9&lt;/Text&gt;
                      &lt;Card&gt;
                          &lt;Text&gt;
                          Ginger Tea, Price: 12
                          &lt;Image style={styles.image} resizeMode=&quot;cover&quot; source={{ uri: avatar }}/&gt;,
                          &lt;/Text&gt;
                      &lt;/Card&gt;
                  &lt;/Card&gt;
                  &lt;Card&gt;
                      &lt;Text&gt;Order Id: MM0o8E4Eo13O3ULdNsL&lt;/Text&gt;
                      &lt;Card&gt;
                          &lt;Text&gt;
                          Sugar Free Tea,Price: 10,
                          avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg'
                          &lt;/Text&gt;
                      &lt;/Card&gt;
                      &lt;Card&gt;
                          &lt;Text&gt;
                           Tea,Price: 8,
                          avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg'
                          &lt;/Text&gt;
                      &lt;/Card&gt;
                  &lt;/Card&gt;
                  
            &lt;/ScrollView&gt;  
  </code></pre>
  <p>I am adding the firebase realtime database screenshot below
  <a href="https://i.stack.imgur.com/mb6o7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mb6o7.png" alt="enter image description here" /></a></p>