title: Get the First Src from JSON
body: <p>In Below JSON, there are two src , namely <strong>image1 , image2</strong>, Right now i am fetching both the src &amp; its x values using <code>foreach</code> and displaying in javascript code, but i need to fetch only <strong>first</strong> src : <code>image1</code> &amp; its x value 100....</p>
  
  <p><strong>JSON</strong></p>
  
  <pre><code>  {  
    "layers" : [
      {
        "x" : 0,
        "height" : 612,     
        "layers" : [
          {
            "x" : 0,          
            "y" : 0,         
            "name" : "L2a"
          },
          {
            "x" : 160,         
            "layers" : [
              {
                "x" : 0,            
                "src" : "image1",
                "y" : 0,              
                "name" : "L2b-1"
              },
              {
  
                "x" : 0,
                "y" : 0,             
                "name" : "L2b-2"
              }
            ],
            "y" : 291,         
            "name" : "user_image_1"
          },
          {
            "x" : 25,         
            "layers" : [
              {
                "x" : 0,             
                "src" : "image2",
                "y" : 0,             
                "name" : "L2C-1"
              },
              {            
                "x" : 0,
                "y" : 0,            
                "name" : "L2C-2"
              }
            ],
            "y" :22,         
            "name" : "L2"
          }
        ],
        "y" : 0, 
        "width" : 612,      
        "name" : "L1"
      }
    ]
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let jsonData = {
    
  
    "layers" : [
      {
        "x" : 10,   
        "layers" : [
          {
            "x" : 20,          
            "y" : 30,         
            "name" : "L2a"
          },
          {
            "x" : 40,         
            "layers" : [
              {
                "x" : 50,            
                "src" : "image1",
                "y" : 60,              
                "name" : "L2b-1"
              },
              {
                
                "x" : 70,
                "y" : 80,             
                "name" : "L2b-2"
              }
            ],
            "y" : 90,         
            "name" : "user_image_1"
          },
          {
            "x" : 100,         
            "layers" : [
              {
                "x" : 105,             
                "src" : "image2",
                "y" : 110,             
                "name" : "L2C-1"
              },
              {            
                "x" : 120,
                "y" : 130,            
                "name" : "L2C-2"
              }
            ],
            "y" : 140,         
            "name" : "L2"
          }
        ],
        "y" : 150,      
        "name" : "L1"
      }
    ]
  };
  
  function getAllSrc(layers){
    let arr = [];
    layers.forEach(layer =&gt; {
      if(layer.src){
        arr.push({src: layer.src, x: layer.x});
      }
      else if(layer.layers){
        let newArr = getAllSrc(layer.layers);
        if(newArr.length &gt; 0){
          newArr.forEach(({src, x}) =&gt;{
            arr.push({src, x: (layer.x + x)});
          });
        }
      }
    });
    return arr;
  }
  
  function getData(data) {
    let arr = getAllSrc(data.layers);
    for (let {src, x} of arr){
    document.write("src :" + src);
   document.write("&lt;br&gt;");
   
   document.write("x:" + x);
   document.write("&lt;br&gt;");
    }   
    
  }
  getData(jsonData);</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/kidsdial/pen/WmZPwX" rel="nofollow noreferrer">https://codepen.io/kidsdial/pen/WmZPwX</a></p>