Create views dynamically based on the JSON

here is the solution:

var url = "http://www.easy-night.net/easy-regie/json/";
var xhr = Titanium.Network.createHTTPClient();
xhr.open('GET', url);
 
xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    var t = response.bons_plans;
    var bons = [];
    for (var item in t) {
        bons.push(t[item]);
    }
    create_view(bons);
}
 
xhr.send();
var ScrollView = Titanium.UI.createScrollView({
    top : 0,
    height : 450,
    contentHeight : 'auto',
    showVerticalScrollIndicator : true,
    showHorizontalScrollIndicator : false
});
 
var topPostion = 60;
function create_view(response) {
 
    for (var i = 0; i < response.length; i++) {
 
    var bons = response[i];
        var leftPosition = 20;
        for (var j = 0; j < bons.length; j++) {
            if (j % 2 == 0) {
                leftPosition = 20;
            } else {
                leftPosition = 180;
            }
 
            var panelImage = Ti.UI.createView({
                backgroundColor : 'rgb(56,56,56)',
                top : topPostion,
                left : leftPosition,
                height : 100,
                width : 120,
            });
            //reset the top postion of the view.
 
            var club_name = Ti.UI.createLabel({
                text : bons[j].name,
                height : 20,
                width : 100,
                color:'red',
                top:5,
                font:{fontWeight:'bold'}
               // backgroundColor : 'rgb(56,56,56)'
            });
 
            panelImage.add(club_name);
 
            // Add the EventListener  for the view.
            panelImage.addEventListener('click', function(e) {
                alert('Working.');
            });
 
            // add the view in scroll view
            ScrollView.add(panelImage);
        }
        topPostion = topPostion + panelImage.height + 40;
    }
    ScrollView.contentHeight = topPostion + 70;
}
 
win.add(ScrollView);

as per json, there are three objects which are arrays.

output should be :

Dimension'DJ

Magnum Loc Dimension'DJ

Magnum Loc

changes are as follows:

1. use another variable in the inner loop.
2. use bons[j].name -- not bons[0].name (which always takes the first object in array)
3. need to set topPostion after the inner loop. because, for each array, u need to start from next row.

you can always check the values in the loops by using Ti.API.info statements, that helps a lot in case of issues. Debugging with breakpoints also is the best practice.

Hope this helps..