Javascript 计算和删除JSON数据
我很困惑如何计算我拥有的json数据。我有数据json id:001,商品:三星,数量:2,价格:$300。首先我想计算小计=数量*价格。这就行了。但是我不知道怎么计算总数。有人能帮忙吗? 这是保存json数据的jsJavascript 计算和删除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
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。我用那个补丁编辑了它。