如何在按鈕單擊時在 javascript 中創建動態 arrays

Question

我正在構建一個示例 javascript 程序，我在其中動態創建了按鈕和 div 標簽，而且我正在從本地JSON文件中獲取數據，我想添加一個新功能，即單擊按鈕時，然后是與應該創建按鈕，以便我可以推送與按鈕名稱匹配的數據。

 // -------- 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>

在這里，我通過從JSON 數組中獲取屬性“DeliveryType”作為按鈕名稱來創建按鈕，並希望創建具有相同名稱的數組。 例如：每周、雙周、每月、自定義

請問有什么解決辦法嗎？

Answer 1

我想我明白，如果您單擊值為“Custom”的按鈕，您需要一個名為 Custom 的數組，如 Custom = []，您可以使用 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

你可以在這里使用字典。 下面是示例代碼。

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);       

});