javascript - Reactjs，如何构建特定的 json 以在每月之间添加金额
问题描述
我的 API 中有这些数据：dataN
[{…}、{…}、{…}、{…}、{…}]
有关每个内部的更多详细信息：{...}
{
date: "2018-01-01"
import: 1
},
{
date: "2018-03-03"
import: "10"
},
{
date: "2018-03-20"
import: 10
},
{
date: "2020-05-01"
import: 10
},
{
date: "2020-05-02"
import: 10
},
{
date: "2020-05-03"
import: 10
},
我有一个函数正在提取所有找到的月份和年份，结果如下：
数组：[“2018-01”，“2018-03”，“2020-05”，......]
使用这个数组，我有另一个函数（工作）在日期之间寻找，并告诉我在给定日期之间进行了多少操作。
示例：在年月：2018-01 我只有 1 次操作，结果将是：
{
date: "2018-01-01"
import: 1
},
与例如相同的事情：“2020-05”我有 3 个操作，所以结果将是：{ date:“2020-05-01”import:10
},
{
date: "2020-05-02"
import: 10
},
{
date: "2020-05-03"
import: 10
},
现在我每个月都进行了操作并按年份排序，我想添加该月要执行的数量。
我的目标是每个月和年添加所有金额（它总是一个数字）（每个月都有一个总金额）例如：
"2018-01" 导入 "2018-03" 导入日期 2020-03-03 + 导入日期 2020-03-20 "2018-05" 导入日期 2020-05-01 + 导入日期 2020-05-01 + 导入日期：“2020-05-03
最终的json：
{
date : "2018-01"
import : 1
},
{
date : "2018-03"
import : 20
},
{
date : "2018-05"
import : 30
}
我有这个代码，但我真的不知道根据需要获取：
我真的很感谢任何帮助。
//["2018-01", "2018-02", "2018-03", "2018-04", "2018-05", .....]
var Total = 0;
array.forEach(function(item){
//console.log(item)
var a = moment(item);
var start = a.format('YYYY-MM-DD')
var b = a.add(30, 'days');
var end = b.format('YYYY-MM-DD')
console.log("procesing search between date : ",start , " and last date: ", end)
DataFromApi.forEach((value, key) => {
var EntreFechas = moment(value.compra_fecha_oper).isBetween(String(start), String(end) ); // true
if ( EntreFechas === true && value.estado == "Finalizado" && value.moneda_crypto == TipoCrypto ){
console.log(key, " Value Date: ",value.compra_fecha_oper ,"Has result: ", EntreFechas)
if (value.estado == "Finalizado" && value.moneda_crypto == TipoCrypto){
var jsonObjFinalizadas =
{
"fecha": value.compra_fecha_oper,
"importe":Total += parseFloat(value.compra_en_fiat),
}
ArrayFechasImportes.push(jsonObjFinalizadas)
}
}
});
});
console.log("El payaso: ",ArrayFechasImportes )
完整代码：
import React, { Component } from 'react';
import moment from "moment";
class RentabilidadMensual extends Component {
//Se calcculará la rentablidad mensual obtenida.
constructor (props){
super(props)
this.state ={
}
}
render() {
const DataFromApi = this.props.data;
console.log("Datos de la API", this.props.data)
var TipoCrypto = this.props.selectedcrypto;
var DatosFechas = [];
var ArrayFechasImportes = [];
//del objeto se extrae las fechas del key: compra_fecha_oper y se genera un array: DatosFechas
this.props.data.forEach((value, key) => {
console.log("1-key =>", key, "1-value =>", value.compra_fecha_oper);
DatosFechas.push(value.compra_fecha_oper)
})
console.log("Busco", DatosFechas)
// Obtengo todas las fechas de la API: ["2020-04-29", "2020-04-19", ...]
const getFirstAndLastDate = (DatosFechas) => {
DatosFechas = DatosFechas.sort()
//Devuelve primera fecha y última fecha
return [DatosFechas[0], DatosFechas[DatosFechas.length - 1]]
}
console.log("First Date: ", getFirstAndLastDate(DatosFechas)[0], "Last Date: ", getFirstAndLastDate(DatosFechas)[1])
function ListarLosMesesEntreDosFechas(inicio, fin) {
var dateStart = moment(inicio);
var dateEnd = moment(fin);
var interim = dateStart.clone();
var timeValues = [];
while (dateEnd > interim || interim.format('M') === dateEnd.format('M')) {
timeValues.push(interim.format('YYYY-MM'));
interim.add(1,'month');
}
return timeValues
}
console.log("Valor de ListarLosMesesEntreDosFechas:", ListarLosMesesEntreDosFechas(getFirstAndLastDate(DatosFechas)[0], getFirstAndLastDate(DatosFechas)[1]) )
//Para cada elemento del array con el datos de Año-mes se busca activiades en este mes y se suma.
var array = ListarLosMesesEntreDosFechas(getFirstAndLastDate(DatosFechas)[0], getFirstAndLastDate(DatosFechas)[1])
//["2018-01", "2018-02", "2018-03", "2018-04", "2018-05", .....]
var Total = 0;
array.forEach(function(item){
//console.log(item)
var a = moment(item);
var start = a.format('YYYY-MM-DD')
var b = a.add(30, 'days');
var end = b.format('YYYY-MM-DD')
console.log("procesing search between date : ",start , " and last date: ", end)
DataFromApi.forEach((value, key) => {
var EntreFechas = moment(value.compra_fecha_oper).isBetween(String(start), String(end) ); // true
if ( EntreFechas === true && value.estado == "Finalizado" && value.moneda_crypto == TipoCrypto ){
console.log(key, " Value Date: ",value.compra_fecha_oper ,"Has result: ", EntreFechas)
if (value.estado == "Finalizado" && value.moneda_crypto == TipoCrypto){
var jsonObjFinalizadas =
{
"fecha": value.compra_fecha_oper,
"importe":Total += parseFloat(value.compra_en_fiat),
}
ArrayFechasImportes.push(jsonObjFinalizadas)
}
}
});
});
console.log("El payaso: ",ArrayFechasImportes )
return (
<div>
test...
</div>
);
}
}
export default RentabilidadMensual;
解决方案
我已经完成了一项要求，如下所示。请尝试此示例并实施其他示例。
import React, {Component} from "react";
export default class JsonExample extends Component {
state = {
updatedJson: []
};
json = [
{date: "2018-01-01", import: "XXX <--number"},
{date: "2018-03-03", import: "XXX<--number"},
{date: "2018-03-20", import: "XXX<--number"},
{date: "2018-03-25", import: "XXX<--number"},
{date: "2020-05-01", import: "XXX<--number"},
{date: "2020-05-02", import: "XXX<--number"},
{date: "2020-05-03", import: "XXX<--number"},
];
componentDidMount() {
let updatedJson = [];
this.json.map(value => {
let d = new Date(value.date);
let yearMonth = ("0" + (d.getMonth() + 1)).slice(-2) + "-" + d.getFullYear();
updatedJson.push(yearMonth);
});
this.setState({updatedJson: updatedJson});
}
render() {
return (
<div>
{JSON.stringify(this.state.updatedJson)}
</div>
);
}
}
根据需求更新完整代码
import React, {Component} from "react";
export default class JsonExample extends Component {
state = {
monthlyData: [],
sortedData: [],
monthlyTotalImport: []
};
json = [
{date: "2018-01-01", import: 7},
{date: "2018-01-21", import: 1},
{date: "2018-03-03", import: 10},
{date: "2018-03-20", import: 10},
{date: "2020-05-01", import: 10},
{date: "2017-12-01", import: 5},
{date: "2020-05-02", import: 10},
{date: "2020-05-03", import: 10},
];
componentDidMount() {
let data = [];
this.json.map(value => {
let d = new Date(value.date);
data.push({...value, date2: d});
});
let sortedData = data.sort((a, b) => a.date2 - b.date2);
console.log(sortedData, 'sorted');
let monthlyData = [];
sortedData.map(value => {
let d = new Date(value.date);
let yearMonth = ("0" + (d.getMonth() + 1)).slice(-2) + "-" + d.getFullYear();
monthlyData.push({...value, yearMonth: yearMonth});
});
console.log(monthlyData, 'monthly data');
let result = monthlyData.reduce((acc, item) => ({
...acc,
[item.yearMonth]: (acc[item.yearMonth] || 0) + item.import
}), {});
this.setState({monthlyTotalImport: result});
console.log(result, 'result');
}
render() {
return (
<div>
{JSON.stringify(this.state.monthlyTotalImport)}
</div>
);
}
}
推荐阅读
- python - Flask-Talisman 打破了 flask-restplus 的招摇文档
- javascript - 将 vanilla js carousel 适配为 ie
- azure - Azure 负载均衡器有什么方法可以与只有私有 IP 地址的虚拟机对话？
- javascript - 如何使用类属性作为我的反应挂钩 const 的对象项
- python - 如果所有单元格都包含某个值，如何删除整行？
- python-3.x - 如何在 python 上模拟网页搜索？
- python - 将 GloVe 向量导入 gensim。UnicodeDecodeError：“utf-8”编解码器无法解码位置 0 的字节 0xe6：无效的继续字节
- sql-server - 如何处理 SQL 插入中未包含的输出值
- php - 如何从位于“
/资源/视图”？ - sql-server - SQL Server：如何从透视表还原回自引用表