计算和删除 JSON 数据

Question

我很困惑如何计算我拥有的数据 json。我有数据 json “id”：“001”，“item”：“samsung”，“quantity”：2，“price”：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;

并告诉我如何使用 button () onClick 删除数据

Answer 1

如果您只是想总结您收到的 quantity * price 的整个 JSON，那么您可以将其作为单独的计算来进行。

const json = [{
    "id" : "001",
    "item" : "samsung",
    "quantity" : 1,
    "price" : 300,

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

}];

const total = json.map(({quantity, price}) => quantity * price)
                  .reduce((a, b) => a + b)
console.log(total)

为了处理删除，请创建一个新函数，该函数接受使用 filter 的元素的 id，将其从您的 this.state.json 中删除。这是一个准系统示例。

handleDelete(id) {
  const filteredJSON = this.state.json.filter(item => {
    return item.id !== id
  })
  this.setState({json: filteredJSON})
}

render() {
  return (
<div>
    {this.state.json.map((data, i) => {
      const id = data.id
      return (
        <div>
          {data.item}
          <button onClick={() => this.handleDelete(id)}>
            {'delete'}
          </button>
        </div>
      )
    })}
</div>
  )
}