我的意见如下

[
    {
        "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判断第一个对象和过滤器语言,然后将USA和Japan计数到一个新数组中.类似地,循环第二个对象并提取该计数.

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

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

我能够通过使用下面的代码实现上述输出.

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');

到目前为止,一切都运转良好.如果输入是动态的,问题就会出现.即,我们不知道输出是否只包括japanusa(不是静态的)

这是我现在期望的动态输入,而不是早期的静态输入.

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

根据上述输入,大约languages个可能包含其他对象中不存在的额外城市.还有一些可能有空的details:[]

对于上述输入,我想要所需的输出

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

有人能告诉我如何动态获取这个吗?

推荐答案

您可以减少数组并从嵌套项获取信息.

const
    filter = (array, value) => array.reduce((r, { languages }, i, a) => {
        languages.some(({ name, details }) => {
            if (name === value) {
                details.forEach(({ city, count }) => {
                    r[city] ??= Array(a.length).fill(0);
                    r[city][i] = count;
                })
                return true;
            }
        });    
        return r;
    }, {}),
    data = [{ metadata: { id: 1071, name: "First" }, languages: [{ name: "Alpha", details: [{ city: "usa", count: 33 }, { city: "korea", count: 20 }] }, { name: "Beta", details: [{ city: "japan", count: 3 }] }] }, { metadata: { id: 1068, name: "Second" }, languages: [{ name: "Alpha", details: [] }, { name: "Beta", details: [{ city: "japan", count: 15 }, { city: "russia", count: 77 }] }] }],
    result1 = filter(data, 'Alpha'),
    result2 = filter(data, 'Beta');

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

Javascript相关问答推荐

我的glb文件没有加载到我的three.js文件中

主要内部的ExtJS多个子应用程序

如何解决这个未能在响应上执行json:body stream已读问题?

在JavaScript中声明自定义内置元素不起作用

Redux查询多个数据库Api reducerPath&

在react JS中映射数组对象的嵌套数据

PDF工具包阿拉伯字体的反转数字

我可以使用使用node.js创建的本地主机来存储我网站上提交的所有数据吗?没有SQL或任何数据库.只有HTML语言

如何迭代叔父元素的子HTML元素

查询参数中的JAVASCRIPT/REACT中的括号

覆盖加载器页面避免对页面上的元素进行操作

NG/Express API路由处理程序停止工作

是否可以在Photoshop CC中zoom 路径项?

按什么顺序接收`storage`事件?

构建器模式与参数对象输入

为什么我看到的是回复,而不是我的文档?

如何让SVG图标在被点击和访问后改变 colored颜色 ,并在被访问后取消点击时恢复到原来的 colored颜色 ?

在JavaScript中将Base64转换为JSON

React数组查找不读取变量

REACT-本机错误:错误类型错误:无法读取未定义的容器的属性