var arr = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "class": "child-of-10"}];
    
for (var i = 0; i < arr.length; i++){
  document.write("<br><br>array index: " + i);
  var obj = arr[i];
  for (var key in obj){
    var value = obj[key];
    document.write("<br> - " + key + ": " + value);
  }
}

note: the for-in method is cool for simple objects. Not very smart to use with DOM object.

You can simply use Array.prototype.map(), to iterate over your json array and return your custom structure, like this:

$(function() {
  let json = JSON.parse('{"app-app":{"$":{},"notneeded":"123","mapped":{"$":{},"match-match":[{"$":{},"name":"Foo 1","url":"/Bar 1"},{"$":{},"name":"Foo 2","url":"/Bar 2"},{"$":{},"name":"Foo 3","url":"Bar 3"}]},"Nothing":"123"}}');


  var result = json['app-app']['mapped']['match-match'].map(function(item) {
    return {
      "name": item.name,
      "url": item.url
    };
  });
  console.dir(result);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

It will give you the expected result.

Problem is with imgsrc = $imgUrl = $imgUrl + a;

Here is the working snippet

var photos = [{"photo1":"myimage1.jpg",
           "photo2":"myimg2.jpg",
           "photo3":"myimg3.jpg",
           "photo4":"myimg4.jpg"}];

            showPhotoOnLoad(photos,"imageurl");

           function showPhotoOnLoad(photos,$imgUrl){
           var $photoData = photos; 
           var photoLength =     Object.keys($photoData[0]).length;
           var i, key;  
           var $containerWidth = 110;
           //alert(photoLength);
           if(photoLength >0){
               $(".mycarousel-container").show();
                 for (i in $photoData) {
                for (key in $photoData[i]) {
                  a = $photoData[i][key];
                imgsrc = "a="+a; 
                var div = $("<div class='mycarousel' style='left:20px'></div>");
                var imgPreview = "<img  class='myimg' src="+imgsrc+">";
                div = div.append(imgPreview);
                $(".carouser-inner").append(div);
console.log(imgsrc);
               // left = left+$containerWidth;

                }               
              }
           }                              
           //console.log($imgUrl);            
       }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>