Javascript 数组中的不同数据

我想在表中按国家显示此数据。首先，我在一个数组中选择所有重复的国家，并对它们进行过滤。接下来，我映射所有数据以在表中显示，但我不知道映射后如何分离这些国家。 在这种情况下，我的目标应该是：

德国

• 慕尼黑流行音乐
• 柏林流行音乐
• 多特蒙德流行音乐

英格兰

• 伦敦流行音乐
• 利物浦流行音乐
• 曼彻斯特流行音乐

。。。 现在我每一行都有我不想要的国家名称 德国慕尼黑流行音乐 德国柏林流行音乐 德国多特蒙德流行音乐

代码：

从“React”导入React；
导入“/styles.css”；
从“/data”导入{data}；
导出默认函数App（）{
让国家=[]；
const mapCountries=data.map（（国家，索引）=>
国家。推送（国家。国家）
);
countries=countries.filter(
（项目，索引，aref）=>aref.indexOf（项目）==索引
);
const showCity=data.map（（项目、索引）=>(
{项目.国家}
{item.city}
{item.pop}
))
返回(
{showCity}
);
}
导出常量数据=[
{
国家：“西班牙”，
城市：“Madrit”，
流行音乐：350万
},
{
国家：“西班牙”，
城市：“巴塞罗那”，
流行音乐：1500000
},
{
国家：“西班牙”，
城市：“瓦伦西亚”，
流行音乐：100万
},
{
国家：“德国”，
城市：“柏林”，
流行音乐：450万
},
{
国家：“德国”，
城市：“慕尼黑”，
流行音乐：1500000
},
{
国家：“德国”，
城市：“多特蒙德”，
流行音乐：100万
},
{
国家：“英格兰”，
城市：“伦敦”，
流行音乐：8000000
},
{
国家：“英格兰”，
城市：“利物浦”，
流行音乐：50万
},
{
国家：“英格兰”，
城市：“曼彻斯特”，
流行音乐：100万
}
];

以下是根据国家对数据进行分组的方法：

const数据=[
{
国家：“西班牙”，
城市：“Madrit”，
流行音乐：350万，
},
{
国家：“西班牙”，
城市：“巴塞罗那”，
流行音乐：1500000，
},
{
国家：“西班牙”，
城市：“瓦伦西亚”，
流行音乐：1000000，
},
{
国家：“德国”，
城市：“柏林”，
流行音乐：450万，
},
{
国家：“德国”，
城市：“慕尼黑”，
流行音乐：1500000，
},
{
国家：“德国”，
城市：“多特蒙德”，
流行音乐：1000000，
},
{
国家：“英格兰”，
城市：“伦敦”，
流行音乐：8000000，
},
{
国家：“英格兰”，
城市：“利物浦”，
流行音乐：50万，
},
{
国家：“英格兰”，
城市：“曼彻斯特”，
流行音乐：1000000，
},
];
设sol={}；
对于（数据所在国）{
if（sol[country.country]==未定义）{
sol[country.country]={city:[country.city]，pop:[country.pop]}；
}否则{
索尔[国家，国家]={
城市：[…太阳[国家.国家].城市，国家.城市]，
pop:[…sol[country.country].pop，country.pop]，
};
}
}
//控制台日志（sol）；
for（让对象的键。键（sol））{
控制台日志（键）；
for（让我输入sol[key].city）{
console.log（sol[key].city[i]，“”，sol[key].pop[i]）；
}
console.log（“-------------”）；
}

对数据进行分组时，我通常会尝试使用该方法。学习起来可能有点让人望而生畏，但一旦你习惯了，它就会变得非常通用

迭代器函数有四个参数；累加器、当前值、当前索引和原始源数组。对于分组数据，我们通常只需要前两个。对于每个项，调用函数，并将返回值传递给下一次迭代以获得最终累积值

这个概念是通过一个特定的索引进行分组，最好是一个分类id（比如国家名称）

const数据=[
{
国家：“西班牙”，
城市：“巴塞罗那”，
流行音乐：1500000
},
{
国家：“西班牙”，
城市：“瓦伦西亚”，
流行音乐：100万
},
{
国家：“德国”，
城市：“柏林”，
流行音乐：450万
},
];
类应用程序扩展了React.Component{
render（）{
const grouped=数据减少（（附件，项目）=>({
//我们使用spread操作符添加所有以前的键
…acc，
//Object.hasOwnProperty检查acc上是否存在分组键
[item.country]：Object.hasOwnProperty.call（acc，item.country）
//如果是，则使用现有组并将项目添加到其列表中
？[…附件[项目国家]，项目]
//否则，使用组的第一项创建一个新数组
：[项目]
}),
//这是空对象acc的初始值
{});
//现在数据看起来像
// {
//“西班牙”：[{国家：“西班牙”，城市：“巴塞罗那”，流行音乐：1500000}]，
//“德国”：[……]
// }
//每个国家都有一个包含每个项目的数组。
//为了在表中显示这一点，您可以首先迭代每个条目
//在分组中，为每个组迭代每个城市。
const showCity=对象
.条目（分组）
//我们可以使用destructuring操作符在这里“解包”国家及其城市列表
.map（[国家、城市]）=>(
{国家}
{cities.map（城市=>(
{城市，城市}
{city.pop}
))}
));
返回(
{showCity}
);
}
}
ReactDOM.render(
,
文件正文
);
最简单的解决方案是创建县城地图，并在下一步处理中使用它：


const数据=[
{
国家：“西班牙”，
城市：“Madrit”，
流行音乐：350万
},
{
国家：“西班牙”，
城市：“巴塞罗那”，
流行音乐：1500000
},
{
国家：“西班牙”，
城市：“瓦伦西亚”，
流行音乐：100万
},
{
国家：“德国”，
城市：“柏林”，
流行音乐：450万
},
{
国家：“德国”，
城市：“慕尼黑”，
流行音乐：1500000
},
{
国家：“德国”，
城市：“多特蒙德”，
流行音乐：100万
},
{
国家：“英格兰”，
城市：“伦敦”，
流行音乐：8000000
},
{
国家：“英格兰”，
城市：“利物浦”，
流行音乐：50万
},
{
国家：“英格兰”，
城市：“曼彻斯特”，
流行音乐：100万
}
];
常量创建
import React from "react";
import "./styles.css";
import { data } from "./data";

export default function App() {
  let countries = [];
  const mapCountries = data.map((country, index) =>
    countries.push(country.country)
  );
  countries = countries.filter(
    (item, index, aref) => aref.indexOf(item) === index
  );

  const showCity = data.map((item, index) => (
    <>
    <tr>
      <td colspan='2'>{item.country}</td>
    </tr>
    <tr>
      <td>{item.city}</td>
      <td>{item.pop}</td>
    </tr>
    </>
  ))
  return (
    <div className="App">
      <table>
        {showCity}
        </table>
    </div>
  );
}

export const data = [
  {
    country: "Spain",
    city: "Madrit",
    pop: 3500000
  },
  {
    country: "Spain",
    city: "Barcelona",
    pop: 1500000
  },
  {
    country: "Spain",
    city: "Valencia",
    pop: 1000000
  },
  {
    country: "Germany",
    city: "Berlin",
    pop: 4500000
  },
  {
    country: "Germany",
    city: "Munich",
    pop: 1500000
  },
  {
    country: "Germany",
    city: "Dortmund",
    pop: 1000000
  },
  {
    country: "England",
    city: "London",
    pop: 8000000
  },
  {
    country: "England",
    city: "Liverpool",
    pop: 500000
  },
  {
    country: "England",
    city: "Manchester",
    pop: 1000000
  }
];

 const showCity = groupCountries.map(([country, cities], index) => (
    <tbody key={new Date().getTime() + index}>
      <tr>
        <td colSpan="2">{country}</td>
      </tr>
      {cities.map(({ city, pop }) => (
        <tr key={city}>
          <>
            <td>{city}</td>
            <td>{pop}</td>
          </>
        </tr>
      ))}
    </tbody>
  ));