javascript - 如何在单击按钮时在 JavaScript 中创建动态数组

标签 javascript html bootstrap-4

我正在构建一个示例 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="08786778786d7a26627b483926393e2638" rel="noreferrer noopener nofollow">[email protected]</a>/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”作为按钮名称来创建按钮，并希望使用相同的名称创建数组。例如:每周、每两周、每月、自定义

请问有什么解决办法吗？

最佳答案

您可以在这里使用字典。下面是示例代码。

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

});

关于javascript - 如何在单击按钮时在 JavaScript 中创建动态数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63158996/

上一篇：c - 用 C 语言实现的双二阶滤波器示例

下一篇：python - 在 QImage 上绘制矩形而不显示它

相关文章：

javascript - Meteor:在页面加载时获取路由参数

javascript - 在我更改 View 之前 JQGrid 寻呼机不显示

php - 在我的 blade.php 上显示特定图像作为水印背景？拉维

css - 除非值很高，否则 margin-top 不会移动

javascript - 滚动页面时为 div 设置动画

html - 如何在 Bootstrap 4.1 中悬停时创建下拉子菜单？

javascript - Phonegap Camera API - 无法读取未定义的属性 'DATA_URL'

javascript - Frida - 调用特定方法重载

javascript - 如果密码和确认密码不同，如何拒绝 Controller 操作？

css - 在 Bootstrap 列周围添加一致的 1px 边框

©2024 IT工具网  联系我们