时间戳

首页 > 解决方案 > 如何获取存储在对象数组中的值的总和 - Javascript

javascript - 如何获取存储在对象数组中的值的总和 - Javascript

问题描述

我正在尝试获取输入值的总价。它是这样显示的。

   Example:
   Name: Chair, Stock: 4, Price: 100
   Name: Chair, Stock: 3, Price: 50
   Name: Table, Stock: 4, Price: 100

在计算过程中，不同的产品应该分开计算，相同的产品名称应该计算为一个 - 显示在Like this中。

chars in total: 550
table in total: 400
Total inventory price: 950

我通过调用或过滤尝试了很多次，但它似乎不起作用。现在不太确定我应该先做什么。你能帮助我吗？

这是我的html代码

    <div>
        <h3>Part 2</h3>
        <form id="products" onsubmit="inventory(event)" action="#">
            <table>
                <tr>
                    <td>Name</td>
                    <td>: <input type="text" id="productName" required></td>
                </tr>
                <tr>
                    <td>Stocks</td>
                    <td>: <input type="text" id="productStock" required></td>
                </tr>
                <tr>
                    <td>Price</td>
                    <td>: <input type="text" id="prodPrice" required></td>
                </tr>
            </table>
            <input type="Submit" value="Add">
        </form>
        <h4>Product List</h4>
        <div id="inventoryList"></div>
        <input type="button" onclick="compute(event)" value="Calculate for local value for each product">
        <h4>Product Total Value</h4>
        <div id="inventorytotal"></div>
    </div>

这是我的 Javascript。我只有添加产品库存的代码。我还没有计算功能。我删除了我的代码，因为我现在不确定从哪里开始。

var prodInventory = []; 
function inventory(e){
    e.preventDefault();

    var products = {
        prodName: document.getElementById('productName').value,
        prodStock: document.getElementById('productStock').value,
        prodPrice: document.getElementById('prodPrice').value
    }

    prodInventory.push(products);
    var myJSON = JSON. stringify(products);
    document.forms[0].reset();

    //Display of Inventory List
    document.getElementById("inventoryList").innerHTML = "";
    for (let x in prodInventory) {
        document.getElementById("inventoryList").innerHTML += "name: " + prodInventory[x].prodName + " , " + "stocks : " +  prodInventory[x].prodStock + " , " + "price: " + prodInventory[x].prodPrice + "<br>";
        console.log(prodInventory)
    }

标签： javascripthtmlarraysobjectsum

解决方案

这将是你的 js 代码

var prodInventory = []; 
    function inventory(){

        var products = {
            prodName: document.getElementById('productName').value,
            prodStock: document.getElementById('productStock').value,
            prodPrice: parseInt(document.getElementById('prodPrice').value)
        }

        prodInventory.push(products);
        var myJSON = JSON. stringify(products);
        document.forms[0].reset();

        //Display of Inventory List
        document.getElementById("inventoryList").innerHTML = "";
        for (let x in prodInventory) {
            document.getElementById("inventoryList").innerHTML += "name: " + prodInventory[x].prodName + " , " + "stocks : " +  prodInventory[x].prodStock + " , " + "price: " + prodInventory[x].prodPrice + "<br>";
            console.log(prodInventory)
        }

        return false;
    }

    function compute() {
        document.getElementById("inventorytotal").innerHTML = "";
        var sum = 0;
        for (let x in prodInventory) {
            sum += prodInventory[x].prodPrice;
            document.getElementById("inventorytotal").innerHTML = sum;
            console.log(prodInventory)
        }
    }

和你的 HTML 代码

<div>
                            <h3>Part 2</h3>
                            <form id="products" onsubmit="inventory()" action="#">
                                <table>
                                    <tr>
                                        <td>Name</td>
                                        <td>: <input type="text" id="productName" required></td>
                                    </tr>
                                    <tr>
                                        <td>Stocks</td>
                                        <td>: <input type="text" id="productStock" required></td>
                                    </tr>
                                    <tr>
                                        <td>Price</td>
                                        <td>: <input type="text" id="prodPrice" required></td>
                                    </tr>
                                </table>
                                <input type="Submit" value="Add">
                            </form>
                            <h4>Product List</h4>
                            <div id="inventoryList"></div>
                            <input type="button" onclick="compute()"
                                value="Calculate for local value for each product">
                            <h4>Product Total Value</h4>
                            <div id="inventorytotal"></div>
                        </div>

首先，您需要将价格值转换为整数，因为

document.getElement*("").value

给你字符串，但你必须添加值。在这种情况下，您需要使用将字符串转换为整数

parseInt(string)

或者

Number(string)

或者

parseFloat(string)

您只需要声明一个“sum”变量，然后添加 arrayin for 循环的值。这是你如何获得所有项目的总和

推荐阅读