how to create dynamic arrays in javascript on button click

Question

I am building a sample javascript program in which i have dynamically created buttons and div tags and also i am fetching data from local JSON file, i want to add a new functionality i.e when a button is clicked, then an array of same name as of button should be created so that i can push data matching the names of the buttons.

 // -------- TESTING CODE-------- // var clicks=0; var data = { "Sheet1": [ { "PlanName": "Mom's Love", "Price": "80", "DeliveryType": "Weekly", "BillingType": "Monthly", "Savings": "80", "NoOfDeliveries": "55", "FinalPrice": "4320" }, { "PlanName": "Mom's Love", "Price": "80", "DeliveryType": "Monthly", "BillingType": "Monthly", "Savings": "90", "NoOfDeliveries": "14", "FinalPrice": "1030" }, { "PlanName": "Mom's Love", "Price": "80", "DeliveryType": "Bi-Weekly", "BillingType": "Monthly", "Savings": "100", "NoOfDeliveries": "27", "FinalPrice": "2060" }, { "PlanName": "Mom's Love", "Price": "80", "DeliveryType": "Custom", "BillingType": "Monthly", "Savings": "110", "NoOfDeliveries": "7", "FinalPrice": "450" }, { "PlanName": "Bloom Box", "Price": "75", "DeliveryType": "Weekly", "BillingType": "Monthly", "Savings": "120", "NoOfDeliveries": "55", "FinalPrice": "4005" }, { "PlanName": "Bloom Box", "Price": "75", "DeliveryType": "Monthly", "BillingType": "Monthly", "Savings": "130", "NoOfDeliveries": "55", "FinalPrice": "3995" }, { "PlanName": "Bloom Box", "Price": "75", "DeliveryType": "Bi-Weekly", "BillingType": "Monthly", "Savings": "140", "NoOfDeliveries": "55", "FinalPrice": "3985" }, { "PlanName": "Bloom Box", "Price": "75", "DeliveryType": "Custom", "BillingType": "Monthly", "Savings": "150", "NoOfDeliveries": "55", "FinalPrice": "3975" }, { "PlanName": "Paradise", "Price": "96", "DeliveryType": "Weekly", "BillingType": "Monthly", "Savings": "160", "NoOfDeliveries": "55", "FinalPrice": "5120" }, { "PlanName": "Paradise", "Price": "96", "DeliveryType": "Monthly", "BillingType": "Monthly", "Savings": "170", "NoOfDeliveries": "55", "FinalPrice": "5110" }, { "PlanName": "Paradise", "Price": "96", "DeliveryType": "Bi-Weekly", "BillingType": "Monthly", "Savings": "180", "NoOfDeliveries": "55", "FinalPrice": "5100" }, { "PlanName": "Paradise", "Price": "96", "DeliveryType": "Custom", "BillingType": "Monthly", "Savings": "190", "NoOfDeliveries": "55", "FinalPrice": "5090" }, { "PlanName": "Romance ", "Price": "105", "DeliveryType": "Weekly", "BillingType": "Monthly", "Savings": "200", "NoOfDeliveries": "55", "FinalPrice": "5575" }, { "PlanName": "Romance ", "Price": "105", "DeliveryType": "Monthly", "BillingType": "Monthly", "Savings": "210", "NoOfDeliveries": "55", "FinalPrice": "5565" }, { "PlanName": "Romance ", "Price": "105", "DeliveryType": "Bi-Weekly", "BillingType": "Monthly", "Savings": "220", "NoOfDeliveries": "55", "FinalPrice": "5555" }, { "PlanName": "Romance ", "Price": "105", "DeliveryType": "Custom", "BillingType": "Monthly", "Savings": "230", "NoOfDeliveries": "55", "FinalPrice": "5545" } ] } var newArr = []; var containerDiv, containerDivRows, containerDivCols; // obj = new Object(); function init() { for (var i = 0; i < data.Sheet1.length; i++) { newArr.push(data.Sheet1[i].DeliveryType); } console.log("Array with duplicates below...."); console.log(newArr); /* Basically, we iterate over the array and, for each element, check if the first position of this element in the array is equal to the current position. Obviously, these two positions are different for duplicate elements. Using the 3rd ("this array") parameter of the filter callback we can avoid a closure of the array variable: */ newArr = newArr.filter(function (item, pos) { return newArr.indexOf(item) == pos; }); console.log("Array without duplicates below...."); console.log(newArr); //-------------TESTING CODE FOR CREATING BUTTONS--------------- for (var j = 0; j < newArr.length; j++) { console.log(newArr[j]); var btn = document.createElement("button"); btn.innerHTML = newArr[j]; btn.className = newArr[j] + " " + "btn btn-light"; btn.style.marginLeft = "10px"; document.body.appendChild(btn); } //----------TESTING CODE FOR CREATING EMPTY SPACE USING "BR" TAG----------- var mainBr = document.createElement("br"); document.body.appendChild(mainBr); // ---------TESTING CODE FOR CREATING CONTAINER DIV-------- containerDiv = document.createElement("div"); containerDiv.className = "container"; containerDiv.id="container" containerDiv.style.display="inline-block"; containerDiv.style.marginLeft="10%"; document.body.appendChild(containerDiv); // ---------TESTING CODE FOR CREATING CONTAINER DIV'S ROWS USING BOOTSTRAP-------- containerDivRows = document.createElement("div"); containerDivRows.className = "row"; containerDivRows.id="row"; document.body.appendChild(containerDiv).appendChild(containerDivRows); /* // ---------TESTING CODE FOR CREATING CONTAINER'S COL USING BOOTSTRAP-------- containerDivCols = document.createElement("col"); containerDivCols.className = "col-md-4"; document.body.appendChild(containerDiv).appendChild(containerDivRows).appendChild(containerDivCols); */ } init(); function displayData(btnName) { console.log("hello...."); console.log(btnName); // ----------TESTING CODE FOR CLEARING THE "ROW" DIV ELEMENTS IF IT CONTAINS ANY ELEMENTS(DIV)-------------- const myNode = document.getElementById("row"); myNode.innerHTML = ''; // ----------TESTING CODE FOR CREATING THE DIV ELEMENTS INSIDE ROW DIV-------------- for (var k = 0; k < 6; k++) { var myDiv = document.createElement("div"); myDiv.className=`dataDiv-${k}`; myDiv.style.marginTop = "30px"; myDiv.style.marginLeft="30px"; myDiv.style.width = '300px'; myDiv.style.height = '200px'; myDiv.style.border="1px solid black"; myDiv.style.float = "left"; myDiv.style.position = "relative"; myDiv.style.display = "inline"; document.body.appendChild(containerDiv).appendChild(containerDivRows).appendChild(myDiv); } // --------------TESTING CODE FOR CREATING DIV ACCORDING TO NUMBER OF PLAN NAMES IN JSON DATA-------------- // -------------TESTING CODE TO DISPLAY DATA INSIDE DIV-------------- } //-------------------ADDING THE EVENT LISTENER ON "WEEKLY" BUTTON--------------------- document.querySelector(".Weekly").addEventListener("click", () => { var button = event.target; console.log(`${button.innerHTML} clicked....`); // displayData() displayData(button.innerHTML); }); //-------------------ADDING THE EVENT LISTENER ON "BI-WEEKLY" BUTTON--------------------- document.querySelector(".Bi-Weekly").addEventListener("click",()=>{ var button = event.target; console.log(`${button.innerHTML} clicked....`); // displayData(); displayData(button.innerHTML); }); //-------------------ADDING THE EVENT LISTENER ON "MONTHLY" BUTTON--------------------- document.querySelector(".Monthly").addEventListener("click",()=>{ var button = event.target; console.log(`${button.innerHTML} clicked....`); // displayData(); displayData(button.innerHTML); }); //-------------------ADDING THE EVENT LISTENER ON "CUSTOM" BUTTON--------------------- document.querySelector(".Custom").addEventListener("click",()=>{ var button = event.target; console.log(`${button.innerHTML} clicked....`); // displayData(); displayData(button.innerHTML); });

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ditstek Innovations Pvt Ltd</title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min:css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="shortcut icon" href="#" /> </head> <body> <script src="https.//code.jquery.com/jquery-3.5.1.slim.min:js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min:js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>

Here i am creating buttons by fetching the property "DeliveryType" from JSON array as button name and want to create the array by the same name. For example: Weekly,Bi-Weekly,Monthly,Custom

Any solution please?

Answer 1

I think I understand if you click a button with the value of "Custom" you want an array named Custom like Custom = [], You can easily do this with an object.

var btnNames = {};

// Event Listeners.. 

document.querySelector(".Custom").addEventListener("click",()=>{

    var button = event.target;

    // Add array named Custom to arrayWithBtnNames
    var arrayName = button.innerHTML;
    btnNames[arrayName] = [];

    /* 
    Or since your event listener is already tied to a button with the 
    value of Custom I assume. You can just do
    */
    btnNames["Custom"] = [];

    console.log(`${button.innerHTML} clicked....`);
    // displayData();
    displayData(button.innerHTML);

});

Answer 2

you can use the dictionary here. Below is the sample code.

var buttonsData = {};

document.querySelector(".Weekly").addEventListener("click", () => {
    
    var button = event.target;
    // check to verify if any key with the button name already exists
    if (buttonsData[button.innerHTML] === undefined)
    {
       // If undefined initialize to an empty array
         buttonsData[button.innerHTML] = [];
    }
    
    buttonsData[button.innerHTML].push(push your data here to array);

    console.log(`${button.innerHTML} clicked....`);
    // displayData()
    displayData(button.innerHTML);       

});