For loop into js object in template

I want to iterate over an object I return from django view to create dynamically columns in a table (each column is a field in a model and I want to be able to switch the model without changing the template)

In the html body part of the template the same exact code worked fine, in the script section it's not.

My guess is the zip object pass as iterator that can consumed only once? if so how do I make django send a normal list object?

This is my view:

def HelperColumnesFieldsAndNames(data):
    columns = { '<ManyToOneRel: client.paymentdata>':["unimp_pay","unimplemented"],
'<ManyToOneRel: client.subscribtiondata>':["subscribtiondata","unimplemented"],
'<ManyToOneRel: client.calldata>':["calldata","unimplemented"],
'<ManyToOneRel: client.extracommunicationdata>':["extracommunicationdata","unimplemented"],
'client.Client.creation_date':["creation_date","Creation Date"],
'client.Client.first_name':["first_name","First Name"],
'client.Client.last_name':["last_name","Last Name"],
'client.Client.address':["address","Address"],
'client.Client.city':["city","City"],
'client.Client.phone_number':["phone_number","Main Phone"],
'client.Client.creator_of_user':["creator_of_user","Client Creator"],
'client.Client.status':["status","Status"],
'client.Client.status_change_time':["status_change_time","Last Time Status Changed"],
'client.Client.allocated':["allocated","Currently Allocated To Talpan"],
'client.Client.group':["group","Owner Group"],
'client.Client.tags':["tags","Tags"],
'client.Client.tagged_items':["tagged_items","Tagged Item"],
    }

    column_name = []
    column_field = []

    for field in data:
        field = str(field)
        if field in columns.keys():
            column_field.append(columns[field][0])
            column_name.append(columns[field][1])


    return zip(column_name, column_field)

# view function
def AllClientts(request):
    user_groups = []
    for groups in request.user.groups.all():
        if groups.name != MANGER_GROUP_NAME:
            user_groups.append(groups)

    # get all object that belongs to the requested user groups
    tableData =  Client.objects.filter(group__in=user_groups)

    return render(request, "client/clients.html", {"objects": tableData, "columns_name":HelperColumnesFieldsAndNames(Client._meta.get_fields()) })

Working example non in the script section

{% block content %}
<div class="d-flex  pt-5 pb-2">

<!-- Need to be set to colums initials names using django -->
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Show
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="swichable_column">
        <!--reate fileds name and Showable names -->
        {% for name in columns_name %}
            <div class="checkbox">
                <label>
                    <input type="checkbox" checked="checked" class="chackable_name" value="{{ name.1 }}">{{ name.0 }}</label>
            </div>
        {% endfor %}
    </div>
</div>
</div>


<div id="example-table"></div>


{% endblock content %}

Script section in my tamplet - not working even do it's the same code

<script>

    //define some sample data
 var tabledata = [
    {id:1, first_name:"Oli Bob", age:"12", col:"red", dob:""},
    {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
    {id:3, name:"Christine Lobowski the gratest and latest", age:"42", col:"green", dob:"22/05/1982"},
    {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
 ];

 $(function() {
    var table = new Tabulator("#example-table", {
    height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    data:tabledata, //assign data to table
    layout:"fitColumns",
    pagination:"local",
    paginationSize:6,
    paginationSizeSelector:[3, 6, 8, 10],
    columns:[ //Define Table Columns

        {% for name in columns_name %}
            {title:"{{ name.0 }}", field:"{{ name.1 }}", align:"center", cellClick:function(e, cell){alert("cell clicked - " + cell.getValue())}},
        {% endfor %}

    ]});




</script>