javascript 如何使用下划线对嵌套对象进行分组并获取匹配的数据长度

4xrmg8kj  于 2023-03-11  发布在  Java
关注(0)|答案(2)|浏览(128)

如何将匹配数据分组到对象数组中,并求出匹配数据的长度,从而求出平均值。

var getdataObj = [{
  "finalUrl": "https://www.amazon.in/",
  "fetchTime": "2022-10-15T08:58:18.485Z",
  "audits": {   
    "first-contentful-paint": {
      "displayValue": "1.2"
    },
    }
},
{
  "finalUrl": "https://www.google.in/",
  "fetchTime": "2022-11-15T08:58:18.485Z",
  "audits": {   
    "first-contentful-paint": {
      "displayValue": "6.2"
    },
    }
},
{
  "finalUrl": "https://www.flipkart.in/",
  "fetchTime": "2022-10-15T08:58:18.485Z",
  "audits": {   
    "first-contentful-paint": {
      "displayValue": "4.2"
    },
    }
},
{
  "finalUrl": "https://www.amazon.in/",
  "fetchTime": "2022-10-15T08:58:18.485Z",
  "audits": {   
    "first-contentful-paint": {
      "displayValue": "3.7"
    },
    }
},
{
  "finalUrl": "https://www.google.in/",
  "fetchTime": "2022-12-15T08:58:18.485Z",
  "audits": {   
    "first-contentful-paint": {
      "displayValue": "3.2"
    },
    }
}]

这是我得到的对象的数组。如何在这里对匹配的元素进行分组。

  • 需要对匹配的URL进行分组。
  • 根据月份和年份分离值。
    预期结果:

https://www.amazon.in/月份:2022-10年总价值:4.9 //(1.2+3.7)
我的代码逻辑:

var groupedData = _.chain(getdataObj)
          .groupBy('fetchTime')
          .map(function (group, datekey) {
          return {
              Month: datekey.substr(0,7),
                WTs: _.chain(group)
                  .groupBy("finalUrl")
                  .map(function (group, key) {
                  return {
                      WT: key,
                     TotalWeight: _.reduce(group, function(acc, i){ 
                          acc.speed += parseFloat(i['audits']['first-contentful-paint']['displayValue']);                         
                          return acc; 
                      }, {speed : 0})
                  };
              })
              .value()
          }})
          .value();

我需要得到长度。例如:我在十月份有三个数据,所以我的平均值计算应该是,
https://www.amazon.in/月份:2022-10
https://www.flipkart.in/月份:2022-10
总价值:9.1 / 3 =〉3.03
任何人都可以请帮助我解决这个问题。
样品小提琴我添加在这里:JSFiddle

var data = [{
    fetchTime: '2022-12-15T08:58:18.485Z',
    finalUrl: 'https://www.amazon.in/',
    audits: {
        "first-contentful-paint": {
        "displayValue": "3.4"
    },
    "largest-contentful-paint": {
      "displayValue": "2.3"
    },
    }
}, {
    fetchTime: '2022-12-15T08:58:18.485Z',
    finalUrl: 'https://www.google.in/',
    audits: {
    "first-contentful-paint": {
        "displayValue": "1.2"
    },
    "largest-contentful-paint": {
      "displayValue": "3.4"
    },
    }
}, {
    fetchTime: '2023-02-15T08:58:18.485Z',
    finalUrl: 'https://www.amazon.in/',
    audits: {
    "first-contentful-paint": {
        "displayValue": "6.2"
    },
    "largest-contentful-paint": {
      "displayValue": "3.5"
    },
    }
}, {
    fetchTime: '2022-11-15T08:58:18.485Z',
    finalUrl: 'https://www.flipkart.in/',
    audits: {
    "first-contentful-paint": {
        "displayValue": "4.2"
    },
    "largest-contentful-paint": {
      "displayValue": "5.3"
    },
    }
}, {
    fetchTime: '2023-01-15T08:58:18.485Z',
    finalUrl: 'https://www.google.in/',
    audits: {
    "first-contentful-paint": {
        "displayValue": "7.2"
    },
    "largest-contentful-paint": {
      "displayValue": "8.3"
    },
    }
}];

var groupedData = _.chain(data)
    .groupBy('fetchTime')
    .map(function (group, key) {
    return {
        Month: key,
        WTs: _.chain(group)
            .groupBy("finalUrl")
            .map(function (group, key) {
            return {
                WT: key,
                TotalWeight: _.reduce(group, function(acc, i){ 
                    acc.speed += parseFloat(i['audits']['first-contentful-paint']['displayValue']);
                    acc.large += parseFloat(i['audits']['largest-contentful-paint']['displayValue']);
                }, {speed:0, large:0})
            };
        })
        .value()
    }})
    .value();

console.log(groupedData);

_.each(groupedData, function(m) {
    console.log("Month: ", m.Month);
    _.each(m.WTs, function(wt) {
        console.log("  ", wt.WT,  ": ", wt.TotalWeight);
    });
});
zvms9eto

zvms9eto1#

您可以使用组合键进行分组,并将displayValue添加到total

const
    data = [{ finalUrl: "https://www.amazon.in/", fetchTime: "2022-10-15T08:58:18.485Z", audits: { "first-contentful-paint": { displayValue: "1.2" } } }, { finalUrl: "https://www.google.in/", fetchTime: "2022-11-15T08:58:18.485Z", audits: { "first-contentful-paint": { displayValue: "6.2" } } }, { finalUrl: "https://www.flipkart.in/", fetchTime: "2022-10-15T08:58:18.485Z", audits: { "first-contentful-paint": { displayValue: "4.2" } } }, { finalUrl: "https://www.amazon.in/", fetchTime: "2022-10-15T08:58:18.485Z", audits: { "first-contentful-paint": { displayValue: "3.7" } } }, { finalUrl: "https://www.google.in/", fetchTime: "2022-12-15T08:58:18.485Z", audits: { "first-contentful-paint": { displayValue: "3.2" } } }],
    result = Object.values(data.reduce((r, { finalUrl, fetchTime, audits: { ["first-contentful-paint"]: { displayValue } } }) => {
        const
            month = fetchTime.slice(0, 7),
            key = [finalUrl, month].join('|');
            
        r[key] ??= { finalUrl, month, total: 0 };
        r[key].total += +displayValue;
        
        return r;
    }, {}));

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
tjjdgumg

tjjdgumg2#

您几乎已经做到了这一点。传递给reduce的函数,也称为迭代对象,必须 * 返回累加器的新值 *。为了同时收集长度,只需将其添加到从map迭代对象返回的对象中。

var data = [{
    fetchTime: '2022-12-15T08:58:18.485Z',
    finalUrl: 'https://www.amazon.in/',
    audits: {
        "first-contentful-paint": {
            "displayValue": "3.4"
        },
        "largest-contentful-paint": {
            "displayValue": "2.3"
        },
    }
}, {
    fetchTime: '2022-12-15T08:58:18.485Z',
    finalUrl: 'https://www.google.in/',
    audits: {
        "first-contentful-paint": {
            "displayValue": "1.2"
        },
        "largest-contentful-paint": {
          "displayValue": "3.4"
        },
    }
}, {
    fetchTime: '2023-02-15T08:58:18.485Z',
    finalUrl: 'https://www.amazon.in/',
    audits: {
        "first-contentful-paint": {
            "displayValue": "6.2"
        },
        "largest-contentful-paint": {
          "displayValue": "3.5"
        },
    }
}, {
    fetchTime: '2022-11-15T08:58:18.485Z',
    finalUrl: 'https://www.flipkart.in/',
    audits: {
        "first-contentful-paint": {
            "displayValue": "4.2"
        },
        "largest-contentful-paint": {
          "displayValue": "5.3"
        },
    }
}, {
    fetchTime: '2023-01-15T08:58:18.485Z',
    finalUrl: 'https://www.google.in/',
    audits: {
        "first-contentful-paint": {
            "displayValue": "7.2"
        },
        "largest-contentful-paint": {
          "displayValue": "8.3"
        },
    }
}];

function yearMonth(dateString) {
    return dateString.slice(0, 7);
}

var groupedData = _.chain(data)
    .groupBy(_.compose(yearMonth, _.property('fetchTime')))
    .map(function (group, key) {
        return {
            Month: key,
            WTs: _.chain(group)
                .groupBy("finalUrl")
                .map(function (group, key) {
                    return {
                        WT: key,
                        TotalWeight: _.reduce(group, function(acc, i){ 
                            acc.speed += parseFloat(i['audits']['first-contentful-paint']['displayValue']);
                            acc.large += parseFloat(i['audits']['largest-contentful-paint']['displayValue']);
                            return acc;
                        }, {speed:0, large:0}),
                        length: group.length
                    };
                })
                .value()
        };
    })
    .value();

_.each(groupedData, function(m) {
    console.log("Month: ", m.Month);
    _.each(m.WTs, function(wt) {
        console.log("  ", wt.WT,  ": ", wt.TotalWeight);
        console.log('Average speed: ', wt.TotalWeight.speed / wt.length);
        console.log('Average large: ', wt.TotalWeight.large / wt.length);
    });
});
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.6/underscore-umd-min.js"></script>

相关问题