Javascript 计算和删除JSON数据

Javascript 计算和删除JSON数据,javascript,json,reactjs,frontend,Javascript,Json,Reactjs,Frontend,我很困惑如何计算我拥有的json数据。我有数据json id:001,商品:三星,数量:2,价格:$300。首先我想计算小计=数量*价格。这就行了。但是我不知道怎么计算总数。有人能帮忙吗? 这是保存json数据的js export function DataBarang () { return [{ "id" : "001", "item" : "samsung", "quantit

我很困惑如何计算我拥有的json数据。我有数据json id:001,商品:三星,数量:2,价格:$300。首先我想计算小计=数量*价格。这就行了。但是我不知道怎么计算总数。有人能帮忙吗? 这是保存json数据的js

export function DataBarang () {
        return  [{
                "id" : "001",
                "item" : "samsung",
                "quantity" : 1,
                "price" : 300,

            },
            {
                "id" : "002",
                "item" : "iphone",
                "quantity" : 2,
                "price" : 450,

            }];
    }
然后是显示数据的表格

import React, { Component } from 'react';
import { DataBarang } from './Barang';

class cart extends Component{
constructor(props) {
    super(props)
    this.state = {
        json: []
    }
}

componentDidMount() {
    this.setState((prevState) => {
        return {
            json: DataBarang()
        }
    })
}
render (){
    return (

        <table id="cart" className="table table-hover table-condensed">
                        <thead>
                            <tr>
                                <th styles="width:50%" className="text-center">Item</th>
                                <th styles="width:10%" className="text-center">Price</th>
                                <th styles="width:8%" className="text-center">Quantity</th>
                                <th styles="width:22%" className="text-center">Subtotal</th>
                                <th styles="width:10%" className="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        {this.state.json.map((data, i) => {
                            var subtotal = data.price*data.quantity;
                            var total = total+subtotal;
                        return (
                            <tr key={i}>
                                <td data-th="Product">
                                    <div className="row">
                                        <img src={} alt="..." className="img-responsive"/>
                                        <div className="col-sm-10">
                                            <h4 className="nomargin">{data.item}</h4>

                                        </div>
                                    </div>
                                </td>
                                <td data-th="Price">Rp.{data.price}</td>
                                <td data-th="Quantity">
                                    <input type="number" className="form-control" value={data.quantity}/>
                                </td>
                                <td data-th="Subtotal" className="text-center">Rp.{subtotal}</td>
                                <td className="actions" data-th="">
                                    <button className="button is-danger"><i className="fa fa-trash-o"></i></button>                             
                                </td>
                            </tr>);
                        })}  
                        </tbody>
                        <tfoot>


                            <tr>
                                <td><Link to ="/" className="button is-warning"><i className="fa fa-angle-left"></i> Lanjut Berbelanja</Link></td>
                                <td colspan="2" className="hidden-xs"></td>
                                <td className="hidden-xs text-center"><strong>Total Rp. {}</strong></td>
                                <td><a href="#" className="button is-success">Checkout <i className="fa fa-angle-right"></i></a></td>
                            </tr>)

                        </tfoot>
                    </table>

    );

}
}

export default cart;

告诉我如何使用按钮onClick删除数据如果你只是想把收到的整个JSON的数量*价格加起来,那么你可以单独计算

常量json=[{ id:001, 项目:三星, 数量:1, 价格:300,, }, { id:002, 项目:iphone, 数量:2, 价格:450, }]; const total=json.map{quantity,price}=>quantity*price .reducea,b=>a+b
console.LogTotal删除数据是什么意思?呈现了什么,激活了什么,卸载/删除了什么?要删除ui级别的数据,只需将其从状态中删除即可。但我想你们必须从数据库中删除数据。在这种情况下,最好的方法是使用一个flux LIB,并根据它们的workflow@Andrew我想删除函数DataBarang中的数据。我在表格中显示了这些数据,并创建了一个按钮来删除表格中每个数据中的数据。@ZoreslavGoral只是在ui上删除而已。因为我只是在我的ui上做一个测试。而且还没有连接到后端和数据库啊,我理解。给我一点时间,但我点击删除按钮时发现什么也没发生。我已经实现了你的代码。请告诉我更多@Andrew@RiyanMaulana我犯了一个小错误。我需要在过滤器内将item更改为item.id。我用那个补丁编辑了它。