Hi, I have this structure of JSON:
{
"Colors": [
{
"1subcolor": [
{
"title": "1st color",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "1st color",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "1st color",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "1st color",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
}
],
"2subcolor": [
{
"title": "2nd color",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "2nd color",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "2nd color",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "2nd color",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "2nd color",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
}
],
"3subcolor": [
{
"title": "3nd color",
"description": "3st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "3nd color",
"description": "3st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "3nd color",
"description": "3st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
}
]
}
],
"Handle": [
{
"1subhandle": [
{
"title": "1st handle",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "1st color",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "1st handle",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "1st handle",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
}
],
"2subhandle": [
{
"title": "2nd handle",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "2nd handle",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "2nd handle",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "2nd handle",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "2nd handle",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
}
],
"3subhandle": [
{
"title": "3nd handle",
"description": "3st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "3nd handle",
"description": "3st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "3nd color",
"description": "3st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
}
]
}
],
"Access": [
{
"1subacc": [
{
"title": "1st acc",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "1st acc",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "1st acc",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "1st acc",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
}
],
"2subacc": [
{
"title": "2nd acc",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "2nd color",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "2nd acc",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "2nd acc",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "2nd acc",
"description": "1st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
}
],
"3subacc": [
{
"title": "3nd acc",
"description": "3st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "3nd acc",
"description": "3st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
},
{
"title": "3nd color",
"description": "3st Image",
"seira": "toy-B",
"image": "images/wheel_cool.png",
"largeimage": "images/wheel_cool.png"
}
]
}
]
}
I created dynamically the 3 buttons that I want, with the the names (Color, Handles, Accesories)
$.getJSON(jsonfile, function(data){
$.each(data, function (array, index) {
console.log("first each",index, array);
$.each(index, function (k, value) {
console.log("second each",value);
var s = stage.createChildSymbol("submenutemplate","menuofmodelscontents");
var r = s.getSymbolElement();
s.$("sub").html(array);
Now,how can I make the above array to be indexed as 0,1,2 as i want to be able to create a click action on those buttons.
And when I'll click for example Colors, the array 1st/2nd/3rdsubcolor to be displayed as title of a div and the objects of the same array to be displayed.
My problem here is how to get the data of the above JSON which is in another dynamic symbol, to the created dynamic symbol submenutemplate, eg. (Colors, Handles, Accessories) and create dynamic symbol with the objects.
here is the link to the files Dropbox - complex-json.zip