JQuery, Ajax, Json, PHP multidimensional associative array

Question

I am trying to loop through a multidimensional associative array retrieved via jquery/ajax from a php file. The php array looks like this:

$pink =  array ( "newarray" => array 
( "varietyOne" => array
("name" => "Poublout", "year" => 2002),
"varietyTwo" => array
("name" => "Gerarde", "year" => 2003),
"varietyThree" => array
("name" => "Encore", "year" => 1956),
"varietyFour" => array
("name" => "Toujours", "year" => 1957),
"varietyFive" => array
("name" => "J'aime", "year" => 1958),
"varietySix" => array
("name" => "Alisee", "year" => 2001)
),
"varNumber" => array
("varietyOne",
"varietyTwo",
"varietyThree",
"varietyFour",
"varietyFive",
"varietySix"
)
);
print json_encode($pink);

The js looks like this:

$(document).ready(function () {
    $('.clicker').click(function () {
        $.ajax({
            type: 'GET',
            url: 'another.php',
            dataType: 'json',
            success: function (brandon) {
                for (var i = 0; i < brandon.newarray.length; i++) {
                    var catName = brandon.varNumber[i];
                    for (var wineName in brandon.newarray[i][catName]) {
                        console.log(branond.newarray[i][catName][wineName]);
                    }
                }
            }
        });
    });
});

And here is the json rather than the php:

{"newarray":
    {"varietyOne":{"name":"Poublout","year":2002},
     "varietyTwo":{"name":"Gerarde","year":2003},
     "varietyThree":{"name":"Encore","year":1956},
     "varietyFour":{"name":"Toujours","year":1957},
     "varietyFive":{"name":"J'aime","year":1958},
     "varietySix":{"name":"Alisee","year":2001}},
 "varNumber":
    ["varietyOne","varietyTwo","varietyThree","varietyFour","varietyFive","varietySix"]}

I've tried several different loops, changing my array values, but I can't make anything work. I can call an individual key=value pair in the array, but I can't get it to loop through all values.
Thank you.

And the results of console.log(brandon)

Object { newarray={...}, varNumber=[6]}
newarray
Object { varietyOne={...}, varietyTwo={...}, varietyThree={...}, more...}
varietyFive
Object { name="J'aime", year=1958}
varietyFour
Object { name="Toujours", year=1957}
varietyOne
Object { name="Poublout", year=2002}
varietySix
Object { name="Alisee", year=2001}
varietyThree
Object { name="Encore", year=1956}
varietyTwo
Object { name="Gerarde", year=2003}
varNumber
["varietyOne", "varietyTwo", "varietyThree", 3 more...]
0   "varietyOne"
1   "varietyTwo"
2   "varietyThree"
3   "varietyFour"
4   "varietyFive"
5   "varietySix"

So, the loop now outputs to console, but I want the text to be displayed on my site. Normally I use a $('#somediv').append(brandon.(whateverelse); and the information will appear. In this case it does not.

Answer 1

You shouldn't need the varNumber array.

All you need is:

for (var index in brandon.newarray) {
    console.log(index);
    console.log(brandon.newarray[index]);
    console.log(brandon.newarray[index]['name']); // or brandon.newarray[index].name
    console.log(brandon.newarray[index]['year']); // or brandon.newarray[index].year
}

In this case, index will be varietyOne , varietyTwo , etc.