我的意见如下

[
    {
        "metadata": { "id": 1071, "name": "First" },
        "languages": [
            { "name": "Alpha", "details": [ { "city": "usa", "count": 33 } ] },
            { "name": "Beta", "details": [ { "city": "japan", "count": 3 } ] },
        ]
    },
    {
        "metadata": { "id": 1068, "name": "Second" },
        "languages": [
            { "name": "Alpha", "details": [ { "city": "japan", "count": 10 }, { "city": "usa", "count": 20 } ] },
            { "name": "Beta", "details": [ { "city": "japan", "count": 15 }, { "city": "usa", "count": 25 } ] },
        ]
    },
]

这是我必须按语言Alpha进行过滤的场景.因此,我必须将第一个对象和过滤器语言进行Alpha次判断,然后将usajapan计数放入新数组中.类似地,循环第二个对象并提取该计数.

最后,我应该得到新数组中的计数序列

output = { japan: [0, 10], usa: [33, 20] } //for filter by Alpha
output = { japan: [3, 15], usa: [0, 25] } //for filter by Beta

正如您所看到的那样,如果details数组中没有japanusa计数,我们将为此按0.

我try 了以下操作,但无法使用reduce达到预期的结果.我在这里错过了什么吗?

let output = input.reduce(
      (result, { languages }) => {
        result.japan.push(languages.details.count || 0);
        result.usa.push(languages.details.count || 0);
        return result;
      },
      { japan: [], usa: [] }
    );

推荐答案

result.japan.push(languages.details.count || 0);

这行不通,details是一个数组,所以你不能在它上调用.count.

您需要在details上循环,然后 for each city添加count,但是,您需要捕获缺失的状态.

我使用了内部reduce将details数组映射到城市/计数对象.

通过这种方式,您可以更改您的try ,以:

p.usa.push(groupedOnCityCount?.usa || 0);
p.japan.push(groupedOnCityCount?.japan || 0);

抓住失踪的国家.


这个演示应该可以让您开始:

const data = [
    {
        "metadata": { "id": 1071, "name": "First" },
        "languages": [
            { "name": "Alpha", "details": [ { "city": "usa", "count": 33 } ] },
            { "name": "Beta", "details": [ { "city": "japan", "count": 3 } ] },
        ]
    },
    {
        "metadata": { "id": 1068, "name": "Second" },
        "languages": [
            { "name": "Alpha", "details": [ { "city": "japan", "count": 10 }, { "city": "usa", "count": 20 } ] },
            { "name": "Beta", "details": [ { "city": "japan", "count": 15 }, { "city": "usa", "count": 25 } ] },
        ]
    },
];

const filterBy = (data, name) => {
    return data.reduce((p, c) => {
        for (let langObj of c.languages) {
            if (langObj.name === name) {
                const groupedOnCityCount = langObj.details.reduce((x, {city,count}) => ({ ...x, [city]: count }), {});
                p.usa.push(groupedOnCityCount?.usa || 0);
                p.japan.push(groupedOnCityCount?.japan || 0);
            }
        }
        return p;
    }, { japan: [], usa: [] });
}

const A = filterBy(data, 'Alpha');
const B = filterBy(data, 'Beta');

console.log(A, B);

Reactjs相关问答推荐

如何在没有 node 模块的情况下利用外部Java脚本文件制作OWL carousel

如何用Reaction做交互式的MathML?

在Reaction中单击并显示子组件延迟/动画

每次单击按钮时,Reaction组件都会重新生成

在Reaction中的第一次装载时,Use Effect返回空数组

我如何在不被 destruct 的情况下将导航栏固定在顶部?

使用Ionic 7和React 18,如何访问历史对象以在页面之间导航?

React组件未出现

React,当我调用handleSubmit()函数时,我正在将application/json和multiform/data中的数据发送到后端,但student_image中没有数据:null

使用experial_useFormState将参数传递给服务器操作

我如何使用 React toastify (Promise) toast 和邮箱 js

从 redux 调用UPDATE_DATA操作时状态变得未定义

React Router 6 点击链接在 React 18 应用中打开 flickr 页面

如何将我的 ID 值传递给下一个组件?

如何将值从下拉列表传递到 select 上的输入?响应式JS

React Router 6.4CreateBrowserRouter子元素不显示

React如何在用户登录后等待当前用户数据被获取

列表应该有一个唯一的关键props

无法有条件地更新useEffect中的setState

React Router 6,一次处理多个搜索参数