After Refresh dont append the same data

Question

im using for first time appcelerator for a Iphone app, im using a TableViewRow, when the window load all is fine, but if i want to refresh the window, the TableViewRow repeat the same data every time that i push refresh, so, i have 5 Categories, after refresh im having the same Categories repeting every time that im trying to refresh.

Ti.UI.backgroundColor = '#dddddd';

var url = "http://remoteJSON.js";
var win = Titanium.UI.currentWindow;
var table = Titanium.UI.createTableView();
var tableData = [];
var json, categorias, categoria, i, row, categoriaLabel, descripcionLabel;

var refreshBtn = Titanium.UI.createButton({
    systemButton: Ti.UI.iPhone.SystemButton.REFRESH
});

refreshBtn.addEventListener('click', function() {
    loadTutoriales();
});

win.setRightNavButton(refreshBtn);


var actInd = Titanium.UI.createActivityIndicator({
    bottom:10, 
    height:50,
    width:10,
    style:Titanium.UI.iPhone.ActivityIndicatorStyle.PLAIN
});

function loadTutoriales(){

    if(!Titanium.Network.online){
         alert("Debe conectarse a internet.");
    } 

    var xhr = Ti.Network.createHTTPClient({

        onload: function() {
        actInd.show();
        actInd.message = 'Loading...'; 


        //Ti.API.debug(this.responseText);

        json = JSON.parse(this.responseText);
        for (i = 0; i < json.categorias.length; i++) {

                var rowColor = '#eeeeee';
                if(i & 1){
                    rowColor = '#ffffff';
                }


                categoria = json.categorias[i];

                var row = Ti.UI.createTableViewRow({
                    height:'auto',
                    hasChild:true
                });

                row.backgroundColor=rowColor;


                /* add */
                var post_view = Titanium.UI.createView({
                        height:'auto', 
                        layout:'vertical',
                        top:5,
                        right:5,
                 bottom:5,
                 left:5
            });

                var av_image = Titanium.UI.createImageView({
                        image:categoria.imageUrl, 
                        top:0,
                        left:0,
                        height:48,
                        width:48
                });
                post_view.add(av_image);

                var inner_view = Titanium.UI.createView({
                    height:'auto',
                    layout:'vertical', 
                    top:0,          
                    right:0,
                    bottom:0,
                    left:0
                });

               /* end add */

                var categoriaLabel = Ti.UI.createLabel({
                    text:categoria.categoryName,
                    left:54,
                    width:120,
                    top:-48,
                    bottom:0,
                    height:18,
                    textAlign:'left',
                    color:'#444444',
                    font:{fontFamily:'Trebuchet MS',fontSize:14,fontWeight:'bold'}
                });
                inner_view.add(categoriaLabel);

                var descripcionLabel = Ti.UI.createLabel({
                    text:'"' + categoria.description + '"',
                    left:54,
                    top:0,
                    bottom:2,
                    height:'auto', 
                    width:'auto',
                    textAlign:'left',
                    font:{fontSize:14}
                });
                inner_view.add(descripcionLabel);
                post_view.add(inner_view);

                row.add(post_view);
                //row.add(descripcionLabel);
                tableData.push(row);
            }

            table.setData(tableData); 
        },
        onerror: function(e) {
            Ti.API.debug("STATUS: " + this.status);
            Ti.API.debug("TEXT:   " + this.responseText);
            Ti.API.debug("ERROR:  " + e.error);
            alert('There was an error retrieving the remote data. Try again.');
        },
        timeout:5000

    });

        //win.add(actInd);
    win.add(table);
    win.open();
        //actInd.hide();
    xhr.open("GET", url);
    xhr.send();
}
loadTutoriales();

Answer 1

When you press the refresh button clear the tableData array and assign to table set data function before you fill your table again. So it will empty your table first and than fill new refreshed data.

Like this,

refreshBtn.addEventListener('click', function() {
    tableData = [];
    table.setData(tableData);
    loadTutoriales();
});