Add values from a json api and display results // React JS

Question

My json api:

{
  "chamado": [
    {
      "id": 1,
      "numeroChamado": 435689,
      "sistema": "xx",
      "requerenteChamado": "xxx.xxx",
      "tecnicoChamado": "xxx.xxx",
      "statusChamado": "Processando",
      "valorBoleto": 350,
      "mesChamado": "Janeiro"
    },
    {
      "id": 2,
      "numeroChamado": 778854,
      "sistema": "xx",
      "requerenteChamado": "xxx.xxx",
      "tecnicoChamado": "xxx.xxx",
      "statusChamado": "Pendente",
      "valorBoleto": 250,
      "mesChamado": "Janeiro"
    }]
}

I need to obtain the values of the value Oil and sum them all according to the Call. Add up all of January and so on. I’m using React Js(Hooks).

Answer 1

You can use a reduce to mount an object in the format mesChamado: totalDoMes, first you need to extract the response calls you got from the api:

const api = {
  "chamado": [
    {
      "id": 1,
      "numeroChamado": 435689,
      "sistema": "xx",
      "requerenteChamado": "xxx.xxx",
      "tecnicoChamado": "xxx.xxx",
      "statusChamado": "Processando",
      "valorBoleto": 350,
      "mesChamado": "Janeiro"
    },
    {
      "id": 2,
      "numeroChamado": 778854,
      "sistema": "xx",
      "requerenteChamado": "xxx.xxx",
      "tecnicoChamado": "xxx.xxx",
      "statusChamado": "Pendente",
      "valorBoleto": 250,
      "mesChamado": "Janeiro"
    },
    {
      "id": 3,
      "numeroChamado": 778854,
      "sistema": "xx",
      "requerenteChamado": "xxx.xxx",
      "tecnicoChamado": "xxx.xxx",
      "statusChamado": "Pendente",
      "valorBoleto": 180,
      "mesChamado": "Fevereiro"
    },
    {
      "id": 4,
      "numeroChamado": 435689,
      "sistema": "xx",
      "requerenteChamado": "xxx.xxx",
      "tecnicoChamado": "xxx.xxx",
      "statusChamado": "Pendente",
      "valorBoleto": 250,
      "mesChamado": "Fevereiro"
    }
  ]
}

const { chamado } = api

After having the array with the data just make a reduce:

const valorTotal = chamado.reduce((total, value) => {
  return {
    ...total,
    [value.mesChamado]: value.valorBoleto + (total[value.mesChamado] ?? 0)
  }
}, {})

I’m basically passing a function as first paramêtro, recovering the accumulated value I called total, and the current value I called value and as the second parameter indicating what will be the initial value that will be assigned to the total, from there we can assemble our object with the key being the month of the call and the value being the sum between the value of the ticket and the total already accumulated.

const api = {
  "chamado": [
    {
      "id": 1,
      "numeroChamado": 435689,
      "sistema": "xx",
      "requerenteChamado": "xxx.xxx",
      "tecnicoChamado": "xxx.xxx",
      "statusChamado": "Processando",
      "valorBoleto": 350,
      "mesChamado": "Janeiro"
    },
    {
      "id": 2,
      "numeroChamado": 778854,
      "sistema": "xx",
      "requerenteChamado": "xxx.xxx",
      "tecnicoChamado": "xxx.xxx",
      "statusChamado": "Pendente",
      "valorBoleto": 250,
      "mesChamado": "Janeiro"
    },
    {
      "id": 3,
      "numeroChamado": 778854,
      "sistema": "xx",
      "requerenteChamado": "xxx.xxx",
      "tecnicoChamado": "xxx.xxx",
      "statusChamado": "Pendente",
      "valorBoleto": 180,
      "mesChamado": "Fevereiro"
    },
    {
      "id": 4,
      "numeroChamado": 435689,
      "sistema": "xx",
      "requerenteChamado": "xxx.xxx",
      "tecnicoChamado": "xxx.xxx",
      "statusChamado": "Pendente",
      "valorBoleto": 250,
      "mesChamado": "Fevereiro"
    }
  ]
}

const { chamado } = api

const valorTotal = chamado.reduce((total, value) => {
  return {
    ...total,
    [value.mesChamado]: value.valorBoleto + (total[value.mesChamado] ?? 0)
  }
}, {})

console.log(valorTotal)