Update Global Array after Onclick

Issue

This Content is from Stack Overflow. Question asked by Mohit Kumar

I have a global array of objects which stores hard coded data,but after onclick i would like to change its values as i want to use updated array for many other functions.
My Code:

var managers = [
                    'data-entry-operator', 'manager', 'technician-electrical', 'technician-mechanical', 
                    'composite-worker','post-manager', 'border-guard-captain', 'HQ',
                    'Director', 'Admin-Manager', 'MOI', 'Luerssen', 'Presentation', 'admin', 
                    'Region-Manger', 'Maintainace', 'Border-Guard-Manager'
                ]

var roles = [
    {
        Role_Name: 'manager',
        Reporting_Manager: 'MOI',
        Region_Permissions: 'Saudi',
    },
    {
        Role_Name: 'data-entry-operator',
        Reporting_Manager: 'admin',
        Region_Permissions: 'UAE',
    },
    {
        Role_Name: 'technician-electrical',
        Reporting_Manager: 'Director',
        Region_Permissions: 'Saudi',
    },
    {
        Role_Name: 'technician-mechanical',
        Reporting_Manager: 'Director',
        Region_Permissions: 'Jeddah',
    },
    {
        Role_Name: 'composite-worker',
        Reporting_Manager: 'admin',
        Region_Permissions: 'India',
    },
];


let regions = ['Saudi', 'UAE' , 'Jeddah', 'India']


var target1 = document.getElementById('select1')
var target2 = document.getElementById('select2')
var target3 = document.getElementById('select3')
var target4 = document.getElementById('tbody')
var target5 = document.getElementById('select4')
var target6 = document.getElementById('select5')


var template = "<option value="~id~">~id~</option>"
var tableTemplate = "<tr><th scope="row">~rNum~</th><td id="~rName~">~rName~</td><td>~rManager~</td><td>~rRegion~</td></tr>"

roles.forEach(function(item,index){
    target4.insertAdjacentHTML('beforeend', tableTemplate.replace(/~rNum~/g, index+1).replace(/~rName~/g, item.Role_Name).replace(/~rRegion~/g, item.Region_Permissions).replace(/~rManager~/g, item.Reporting_Manager));
})

managers.forEach(function(item) {
  target1.insertAdjacentHTML("beforeend", template.replace(/~id~/g, item));
});

regions.forEach(function(item) {
    target2.insertAdjacentHTML("beforeend", template.replace(/~id~/g, item));
  });

  managers.forEach(function(item) {
    target5.insertAdjacentHTML("beforeend", template.replace(/~id~/g, item));
  });
  
  regions.forEach(function(item) {
      target6.insertAdjacentHTML("beforeend", template.replace(/~id~/g, item));
    });

managers.forEach(function(item){
    target3.insertAdjacentHTML("beforeend",template.replace(/~id~/g, item))
})

var conceptName, reportManager;
$(document).ready(function(){
    $(document).on('change','#select3' ,function change(){
        $('.checkData').removeClass('active');
        $('.third').fadeOut();
        $('.third').fadeIn(); 
        conceptName = $('#select3').find(":selected").text();
        $('.third').addClass('active');
        $('.third').removeAttr('style');
        $('#exampleDataList').val(conceptName);
        reportManager = roles.find(role => role.Role_Name === conceptName);
        $("#select1").val(reportManager.Reporting_Manager)
        $('#select2').val(reportManager.Region_Permissions)
        var newData;
        $('#savebtn').click(function result(){
                const rName = $('#exampleDataList').val();
                const rManager = $('#select1').find(":selected").text();
                const rPermission = $('#select2').find(":selected").text();
                reportManager.Role_Name = rName;
                reportManager.Reporting_Manager = rManager;
                reportManager.Region_Permissions = rPermission;
                newData = reportManager;
                changeData();

                $('.third').removeClass('active');
                if(!$('.checkData').hasClass('active')){
                    $('.checkData').addClass('active');
                }
            }
        );
        function changeData(){
            roles.map(role => {
                if(role.Role_Name === conceptName){
                    role.Role_Name = newData.Role_Name;
                    role.Region_Permissions = newData.Region_Permissions;
                    role.Reporting_Manager = newData.Reporting_Manager;
                    $(`#select1 option[value=${role.Reporting_Manager}]`).text(newData.Reporting_Manager);
                    $(`#select2 option[value=${role.Region_Permissions}]`).text(newData.Region_Permissions);
                }   
            })
            managers.forEach(function(elem,index){
                if(conceptName == elem){
                    managers[index] = newData.Role_Name;
                    $(`#select3 option[value=${conceptName}]`).text(newData.Role_Name);
                }
            })
        }

        $('#dataClose').click(function(){
            $('.third').removeClass('active');
            if(!$('.checkData').hasClass('active')){
                $('.checkData').addClass('active');
            }
        })
    })
})

const update = function(newN,newMa,newReg){
    roles.push({Role_Name: newN,Reporting_Manager: newMa,Region_Permissions:newReg}) ; 
}

let newRole,newRegion,newManager, newArr;
$(document).ready(function(){
    $('#addRole').click(function(){
        newRole= $('#newRoleName').val();
        newManager = $('#select4').find(":selected").val();
        newRegion = $('#select5').find(":selected").text(); 
        update(newRole,newManager,newRegion);
    })
})

Here i would to update my roles and managers array as it dynamically gets data for templates and i want to use it in next funtionalities as well.



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?