javascript - 按名称对数组数据进行分组

标签 javascript arrays typescript pure-js

我正在尝试开发一个具有“运输”专业知识的数组,其中包含每个部门和分配给他们的文本。

这是我的:


    - Healthcare
    -- Data-driven insights to improve healthcare
    -- Novel data mining and visualisation
    -- Human-centred augmented and virtual realities

    - Energy
    -- Urban Analytics
    -- Understanding patterns of consumer behaviour
    -- Optimising energy systems

This is what I'm trying to do:


    - expertise (e.g Transport)

    -- sector (e.g Data)
    --- text (e.g Urban Analytics)
    --- text (e.g Understanding patterns of consumer behaviour)
    --- text (e.g Human-centred augmented and virtual realities)

    -- sector (e.g Engineering)
    --- text (e.g Optimising energy systems)
    --- text (e.g High speed rail and system integration innovation)
    --- text (e.g Human-centred robotic and autonomous systems)
    --- text (e.g Surface engineering across the length scales)

    -- sector (e.g Environment)
    --- text (e.g Europe’s leading city simulation capability)

    - expertise
    -- sector
    --- text

Here's the code I'm using at the moment if anyone is able to help I would highly appreciate it.

var items = [{
    "item": {
      "id": 0,
      "sector": 'Data',
      "expertise": ["Healthcare"],
      "text": "Data-driven insights to improve healthcare"
    }
  },
  {
    "item": {
      "id": 1,
      "sector": 'Data',
      "expertise": ["Energy", "Transport", "Cities"],
      "text": "Urban Analytics"
    }
  },
  {
    "item": {
      "id": 2,
      "sector": 'Data',
      "expertise": ["Energy", "Transport", "Consumer"],
      "text": "Understanding patterns of consumer behaviour"
    }
  },
  {
    "item": {
      "id": 3,
      "sector": 'Data',
      "expertise": ["Healthcare", "Consumer"],
      "text": "Novel data mining and visualisation"
    }
  },
  {
    "item": {
      "id": 4,
      "sector": 'Data',
      "expertise": ["Healthcare", "Transport", "Consumer"],
      "text": "Human-centred augmented and virtual realities"
    }
  },
  {
    "item": {
      "id": 5,
      "sector": 'Healthcare',
      "expertise": ["Healthcare"],
      "text": "Medical technology innovation, translation and convergence"
    }
  },
  {
    "item": {
      "id": 6,
      "sector": 'Healthcare',
      "expertise": ["Healthcare"],
      "text": "Understanding cardio metabolic disease"
    }
  },
  {
    "item": {
      "id": 7,
      "sector": 'Healthcare',
      "expertise": ["Healthcare"],
      "text": "Improving early cancer diagnosis and treatment"
    }
  },
  {
    "item": {
      "id": 8,
      "sector": 'Healthcare',
      "expertise": ["Healthcare", "Pharmaceuticals"],
      "text": "Understanding life in molecular detail"
    }
  },
  {
    "item": {
      "id": 9,
      "sector": 'Healthcare',
      "expertise": ["Healthcare"],
      "text": "Evidencing treatment through clinical trials"
    }
  },
  {
    "item": {
      "id": 10,
      "sector": 'Engineering',
      "expertise": ["Energy", "Transport"],
      "text": "Optimising energy systems"
    }
  },
  {
    "item": {
      "id": 11,
      "sector": 'Engineering',
      "expertise": ["Energy"],
      "text": "Enhancing petroleum recovery"
    }
  },
  {
    "item": {
      "id": 12,
      "sector": 'Engineering',
      "expertise": ["Transport"],
      "text": "High speed rail and system integration innovation"
    }
  },
  {
    "item": {
      "id": 13,
      "sector": 'Engineering',
      "expertise": ["Healthcare", "Electronics"],
      "text": "Terahertz frequency electronic and photonic devices"
    }
  },
  {
    "item": {
      "id": 14,
      "sector": 'Engineering',
      "expertise": ["Healthcare", "Transport", "Manufacturing"],
      "text": "Human-centred robotic and autonomous systems"
    }
  },
  {
    "item": {
      "id": 15,
      "sector": 'Engineering',
      "expertise": ["Healthcare", "Energy", "Transport", "Manufacturing"],
      "text": "Surface engineering across the length scales"
    }
  },
  {
    "item": {
      "id": 16,
      "sector": 'Engineering',
      "expertise": ["Pharmaceuticals", "Manufacturing"],
      "text": "Chemical and process engineering from molecule to product"
    }
  },
  {
    "item": {
      "id": 17,
      "sector": 'Engineering',
      "expertise": ["Pharmaceuticals"],
      "text": "Bionanotechnology for disease diagnosis, treatment and prevention"
    }
  },
  {
    "item": {
      "id": 18,
      "sector": 'Engineering',
      "expertise": ["Healthcare", "Pharmaceuticals", "Electronics", "Manufacturing"],
      "text": "Engineering materials at the atomic level"
    }
  },
  {
    "item": {
      "id": 19,
      "sector": 'Environment',
      "expertise": ["Healthcare", "Environment & Food"],
      "text": "Addressing global challenges in food security"
    }
  },
  {
    "item": {
      "id": 20,
      "sector": 'Environment',
      "expertise": ["Healthcare", "Environment & Food"],
      "text": "Interdisciplinary approaches to tackling major water issues"
    }
  },
  {
    "item": {
      "id": 21,
      "sector": 'Environment',
      "expertise": ["Cities"],
      "text": "Designing cities of the future"
    }
  },
  {
    "item": {
      "id": 22,
      "sector": 'Environment',
      "expertise": ["Transport", "Cities"],
      "text": "Europe’s leading city simulation capability"
    }
  },
  {
    "item": {
      "id": 23,
      "sector": 'Environment',
      "expertise": ["Environment & Food"],
      "text": "Robust and timely climate solutions"
    }
  }
];

let expertise;
let res = items.reduce((acc, {
  item: {
    expertise,
    text
  }
}) => {
  expertise.forEach(x => acc[x] = [...(acc[x] || []), text]);
  return acc;
}, {});


Object.entries(res).forEach(([k, v]) => {
  console.log(k + "\n->" + v.join("\n->"));
});

最佳答案

您需要为扇区增加一个级别:

var items = [{"item": {"id": 0,"sector": 'Data',"expertise": ["Healthcare"],"text": "Data-driven insights to improve healthcare"}},{"item": {"id": 1,"sector": 'Data',"expertise": ["Energy", "Transport", "Cities"],"text": "Urban Analytics"}},{"item": {"id": 2,"sector": 'Data',"expertise": ["Energy", "Transport", "Consumer"],"text": "Understanding patterns of consumer behaviour"}},{"item": {"id": 3,"sector": 'Data',"expertise": ["Healthcare", "Consumer"],"text": "Novel data mining and visualisation"}},{"item": {"id": 4,"sector": 'Data',"expertise": ["Healthcare", "Transport", "Consumer"],"text": "Human-centred augmented and virtual realities"}},{"item": {"id": 5,"sector": 'Healthcare',"expertise": ["Healthcare"],"text": "Medical technology innovation, translation and convergence"}},{"item": {"id": 6,"sector": 'Healthcare',"expertise": ["Healthcare"],"text": "Understanding cardio metabolic disease"}},{"item": {"id": 7,"sector": 'Healthcare',"expertise": ["Healthcare"],"text": "Improving early cancer diagnosis and treatment"}},{"item": {"id": 8,"sector": 'Healthcare',"expertise": ["Healthcare", "Pharmaceuticals"],"text": "Understanding life in molecular detail"}},{"item": {"id": 9,"sector": 'Healthcare',"expertise": ["Healthcare"],"text": "Evidencing treatment through clinical trials"}},{"item": {"id": 10,"sector": 'Engineering',"expertise": ["Energy", "Transport"],"text": "Optimising energy systems"}},{"item": {"id": 11,"sector": 'Engineering',"expertise": ["Energy"],"text": "Enhancing petroleum recovery"}},{"item": {"id": 12,"sector": 'Engineering',"expertise": ["Transport"],"text": "High speed rail and system integration innovation"}},{"item": {"id": 13,"sector": 'Engineering',"expertise": ["Healthcare", "Electronics"],"text": "Terahertz frequency electronic and photonic devices"}},{"item": {"id": 14,"sector": 'Engineering',"expertise": ["Healthcare", "Transport", "Manufacturing"],"text": "Human-centred robotic and autonomous systems"}},{"item": {"id": 15,"sector": 'Engineering',"expertise": ["Healthcare", "Energy", "Transport", "Manufacturing"],"text": "Surface engineering across the length scales"}},{"item": {"id": 16,"sector": 'Engineering',"expertise": ["Pharmaceuticals", "Manufacturing"],"text": "Chemical and process engineering from molecule to product"}},{"item": {"id": 17,"sector": 'Engineering',"expertise": ["Pharmaceuticals"],"text": "Bionanotechnology for disease diagnosis, treatment and prevention"}},{"item": {"id": 18,"sector": 'Engineering',"expertise": ["Healthcare", "Pharmaceuticals", "Electronics", "Manufacturing"],"text": "Engineering materials at the atomic level"}},{"item": {"id": 19,"sector": 'Environment',"expertise": ["Healthcare", "Environment & Food"],"text": "Addressing global challenges in food security"}},{"item": {"id": 20,"sector": 'Environment',"expertise": ["Healthcare", "Environment & Food"],"text": "Interdisciplinary approaches to tackling major water issues"}},{"item": {"id": 21,"sector": 'Environment',"expertise": ["Cities"],"text": "Designing cities of the future"}},{"item": {"id": 22,"sector": 'Environment',"expertise": ["Transport", "Cities"],"text": "Europe’s leading city simulation capability"}},{"item": {"id": 23,"sector": 'Environment',"expertise": ["Environment & Food"],"text": "Robust and timely climate solutions"}}];

const res = items.reduce((acc, {item: {sector, expertise, text}}) => {
    expertise.forEach(exp => {
        acc[exp] = acc[exp] || {};
        acc[exp][sector] = [...(acc[exp][sector] || []), text];
    });
    return acc;
}, {});

Object.entries(res).forEach(([exp, sectors]) => {
    console.log("- " + exp);
    Object.entries(sectors).forEach(([sector, texts]) => {
        console.log("-- " + sector + "\n--- " + texts.join("\n--- "));
    });
});

说明

reduce操作中,sector也是从对象中抓取的。就像原来一样,专业知识被迭代,但现在 acc 对象变成了一个两级对象,而不是只有一个级别。第一级属性是专业知识 (exp)。如果这样的属性还不存在,它会得到一个空对象作为值:

        acc[exp] = acc[exp] || {};

接下来的行很像您已经拥有的:下一个属性级别由扇区组成,并且为每个扇区维护一个文本数组。

代码的第二部分应用了与您已有的相同的原则,但又多了一层。首先迭代专业知识属性。它们以对象作为值,每个对象都具有扇区属性。然后,内部循环再次与您之前的循环非常相似:对于每个扇区,显示扇区和关联的文本值。

关于javascript - 按名称对数组数据进行分组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54398897/

相关文章:

javascript - 使用 ES6 语法导入 jQuery 时出现类型错误

javascript - 如何在 React 中将 prop 作为 null 传递?

javascript - 如何获取数组中所有json键

python - 3D 原点 x 的 3D 数组快速插值

C 编程数组索引越界

angular - 如何从订阅返回可观察

javascript - 无法从开发者控制台使用 `document.execCommand(' copy');`

javascript - TypeScript 和点符号访问对象

typescript - TestDecor_1.TestDeco 不是构造函数

javascript - 如何在 Typescript 的 Angular 指令类中添加 Controller