从JSON嵌套列表中过滤并返回多个值

Question

我有一个包含美国州名和城市的JSON文件：

[
  {
    "state": "Iowa",
    "id": "IA",
    "places": [
      {
        "city": "Ames",
        "description": "ames-description"
      },
      {
        "city": "Davenport",
        "description": "davenport-description"
      }
    ]
  },
  {
    "state": "Illinois",
    "id": "IL",
    "places": [
      {
        "city": "Chicago",
        "description": "chicago-description"
      },
      {
        "city": "Elgin",
        "description": "elgin-description"
      },
      {
        "city": "Joliet",
        "description": "joliet-description"
      }
    ]
  }
]

我想根据城市名过滤列表，并返回对应的描述、州名以及州ID。以下是用于过滤列表的代码：

const cityname = 'Elgin'; // 动态获取的城市名

// 过滤匹配城市名的数组
const filterPosts = stateNames.flatMap((filterPlaces) => {
  return filterPlaces.places.filter((getArray) => getArray.city === cityname);
});

// 获取所需信息
const cityDetails = filterPosts.length > 0 ? filterPosts[0] : null;

if (cityDetails) {
  const { description, state: cityName, id: stateId } = cityDetails;
  
  // 返回所需的详细信息
  return (
    <>
      {`${cityName}, ${stateId}`}
      {cityName}
      {description}
    
  );
} else {
  return <>City not found;
}

在CityPage.tsx中，您可以这样实现：

import { useParams } from 'react-router-dom';

const CityDetailsPage = () => {

  // 从URL参数中获取城市名
  const { cityname } = useParams();

  // 解析并过滤JSON数据以找到对应城市的信息
  const cityDetails = stateNames.flatMap(state => 
    state.places.find(place => place.city === cityname)
  )[0];

  if (cityDetails) {
    const { description, state: cityName, id: stateId } = cityDetails;

    return (
      <>
        {`${cityName}, ${stateId}`}
        {cityName}
        {description}
      
    );
  } else {
    return <>城市未找到;
  }
}

export default CityDetailsPage;

现在，当用户点击“Elgin”时，该代码将从列表中匹配值并返回如下所示内容：

Elgin, IL
Illinois
description of Elgin

任何建议都将不胜感激。提前感谢。

Suresh Atta · Answer

您可以使用 Array.prototype.flatMap() 方法从嵌套结果中生成一个扁平数组。

结合filter()方法，可以将扁平列表缩小到匹配的城市：

// 您的简化数据
const stateNames = [{"state":"Iowa ","id":"IA","places":[{"city":"Ames","description":"ames-description"},{"city":"Davenport ","description":"davenport-description"}]},{"state":"Illinois ","id":"IL","places":[{"city":"Chicago","description":"chicago-description"},{"city":"Elgin ","description":"elgin-description"},{"city":"Joliet ","description":"joliet-description"}]}];

// 创建一个扁平映射
const allPlaces = stateNames.flatMap(({ state, id, places }) =>
  places.map((place) => ({
    stateName: state.trim(),
    stateId: id,
    ...place,
  })),
);

// 根据城市过滤
const cityname = 'Elgin';
const matches = allPlaces.filter(({ city }) => city.trim() === cityname);
console.log(matches);

这样做的好处是可以创建一个单一列表，您可以在其中多次搜索不同的匹配项（这是相当常见的搜索用途）。

在React应用程序的上下文中，您可以像这样使用它：

import stateNames from './states.json'; // 这里假设是从states.json导入的数据

const allPlaces = stateNames.flatMap(({ state, id, places }) =>
  places.map((place) => ({
    stateName: state.trim(),
    stateId: id,
    ...place,
  })),
);

const CityDetailsPage = () => {
  // 从URL获取城市名
  const { cityname } = useParams();

  const cities = allPlaces.filter(({ city }) => city.trim() === cityname);

  return (
    <>
      {cities.map((place) => (
        
          {place.city}, {place.stateId}

          {place.stateName}

          {place.description}
        
      ))}
    
  );
};

Ben Voigt · Answer

这段代码可以完成任务。如果你不打算使用不必要的复杂构造，那么这种方法会更为简单直接。正如一位智者曾经说过的：“保持简洁，傻瓜”。

const states = [
    {
        "state": "Iowa ",
        "id": "IA",
        "places": [
            {
                "city": "Ames",
                "description": "ames-description"
            },
            {
                "city": "Davenport ",
                "description": "davenport-description"
            }
        ]
    },
    {
        "state": "Illinois ",
        "id": "IL",
        "places": [
            {
                "city": "Chicago",
                "description": "chicago-description"
            },
            {
                "city": "Elgin ",
                "description": "elgin-description"
            },
            {
                "city": "Joliet ",
                "description": "joliet-description"
            }
        ]
    }
];
// console.log(states);

const searchCity = 'Joliet';

let resultArray = [];

states.forEach(state => {
    // console.log(state);
    state.places.forEach(place => {
        if (place.city.includes(searchCity)) {
            // console.log(place.city);
            resultArray.push({
                city: place.city.trim(),
                description: place.description,
                state: state.state.trim(),
                id: state.id
            });
        }
    });
});

console.log(resultArray);