Search code examples
javascriptreactjsjsxreact-admin

Dynamically created array length in reactJS


I have an array like this coming from the API:

[
{
    "clicks": {
        "2019-01": [
            {
                "clicks": "194",
                "type": 0,
                "user": 19
            },
            {
                "clicks": "414",
                "type": 0,
                "user": 19
            },
            {
                "clicks": "4",
                "type": 90,
                "user": 20
            },
            {
                "clicks": "3",
                "type": 90,
                "user": 21
            }
        ],
        "2019-02": [
            {
                "clicks": "2",
                "type": 2,
                "user": 17
            },
            {
                "clicks": "1",
                "type": 1,
                "user": 19
            }
        ]
    }
}
]

I want to count all the clicks in each month.

i wrote this so far:

const MyMonthlyClickCount = ({ record }) => {
    console.log("bla", record);
    var fLen, i, myMonth;
    fLen = record.id.length;
    myMonth = record.id;
    for (i =0; i < fLen; i++) {
       var ads, all, phone, z, mLen;
       mLen = `record.clicks.${myMonth[i].yearmonth}`.length;
       console.log("mLen:", mLen);
    }
    return (<StatusTextField source="record.clicks.2019-01.name" statusK="valami" />)
}

however mLen does not do what I want from it. It currently counts the characters in the string.

I want mLen to give me back the array length.

How can I do that?

output of console.log:

bla {clicks: {…}, id: Array(2)}
clicks: 2019-01: (32) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
2019-02: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
__proto__: Object
id: (2) [{…}, {…}]
__proto__: Object

mLen: 21

Solution

  • It is worth adding some more data, but here you go.

    let rawData = [
      {
        "clicks": {
            "2019-01": [
                {
                    "clicks": "47",
                    "id": 63,
                    "type": 0,
                    "user": 5
                },
                {
                    "clicks": "459",
                    "id": 5,
                    "type": 0,
                    "user": 5
                }
           ],
            "2019-02": [
                {
                    "clicks": "0",
                    "id": 44,
                    "type": 0,
                    "user": 12
                }
             ]
          }
       }
    ];
    
    const MyMonthlyClickCount = (record) => {
      if(Array.isArray(record) === false) record = [record];
      return record.map(year => {
        let arrMonth = [];
        for(mth in year.clicks) {
          let m = {
            month: mth,
            clicks: year.clicks[mth].reduce((a,v) => a+=parseInt(v.clicks),0)
          };
          arrMonth.push(m);
        }
        return arrMonth;
      });
    };
    
    
    
    console.log(MyMonthlyClickCount(rawData));
    console.log(MyMonthlyClickCount(rawData[0]));