如何通过 ReactJs 将巨大的 Json 转换为数组

Question

我有以下 JSON 数据，其中包含 2000 多个城市信息。 在我的反应应用程序中，如果我可以将它们转换为数组，我可以使用这些 JSON 数据。 已经有人问过类似的问题。 但我找不到相似之处。 因为我是 JS 和 Reactjs 的新手 :)。

{
  "cities": [
    {
      "lat": "56°09'N",
      "lon": "10°13'E",
      "city": "Aarhus"
    },
    {
      "lat": "57°09'N",
      "lon": "2°07'W",
      "city": "Aberdeen"
    },
    {
      "lat": "5°19'N",
      "lon": "4°02'W",
      "city": "Abidjan"
    },
    {
      "lat": "24°28'N",
      "lon": "54°22'E",
      "city": "Abu Dhabi"
    },
}

从这个 json 数据中，我如何制作城市数组和经纬度数组？

更新的问题：

因为我正在学习 Reactjs。 我打算对所有可用的城市进行如下选择。 绝对是错误的。 我该怎么做？

          <div>
            <select name="city" ref={this.props.form.register}>
            <option value="">Select...</option>
            {
                myJson.cities.forEach((eaCity) => {
                    city = eaCity.city;
                    value = " "+eaCity.lat; // I need lat and lon later on as string
                    value += " "+eaCity.lon;
                    console.log("value: "+value);
                    console.log("city: "+city);
                })
            }
            <option value={value}>{city}</option> // I will store city, lat, lon after user selection. But I won't show it to the user. So I am trying to have value this way. 
        </select>
       </div>

Answer 1

所以你想要三个独立的数组？ 好吧，让我们这样做：

const cities = [];
const lats = [];
const longs = [];

您想以某种方式从现有数组中提取值吗？ 好吧，让我们用forEach做到这一点：

// Assuming myJson.cities is the array in the "cities" field
myJson.cities.forEach((eaCity) => {
    // do something here
});

嗯，我们在循环中做什么？ 好吧，让我们push()一个新值push()到我们之前创建的三个数组中：

myJson.cities.forEach((eaCity) => {
    cities.push(eaCity.city);
    lats.push(eaCity.lat);
    longs.push(eaCity.long);
});

这一切都假设您的应用程序中已经有了 JSON 数据。 如果不这样做，大多数 React 应用程序配置（webpack 或 Parcel）将已经设置为加载 JSON 文件：

import myJson from '../path/to/myJson.json';

让我们把它放在一起：

import myJson from '../path/to/myJson.json';

const cities = [];
const lats = [];
const longs = [];

myJson.cities.forEach((eaCity) => {
    cities.push(eaCity.city);
    lats.push(eaCity.lat);
    longs.push(eaCity.long);
});

注意：此方法比.map()高效得多，因为它只涉及一个循环（数组遍历），而不是不必要地遍历同一个数组 3 次。 :)

编辑：你看更新似乎你真正想要做的是在映射一个数组来呈现JSX东西。 这是一个完全不同的问题，而不是你问题的第一部分到底是关于什么的。 但它应该看起来像这样：

return (
    <div>
        <select
          name="city"
          ref={this.props.form.register}
          value={this.state.selectedValue}
          onChange={(event) => {
            this.setState({selectedValue: event.target.value});
          }}
        >
          <option value="">Select...</option>
          {
            myJson.cities.map((eaCity) => {
                return (
                  <option
                    key={eaCity.city}
                    value={`${eaCity.city} ${eaCity.lat} ${eaCity.long}`}
                  >
                    {eaCity.city}
                  </option>
                );
            })
          }
       </select>
   </div>
);

请注意，您必须在渲染返回中使用.map()而不是.forEach()因为.map()返回某种类型的新数组（在这种情况下，理想情况下可以由 React 渲染的东西，例如组件数组) 而.forEach()返回 undefined 这没有帮助。

如果这不能回答您的问题，我真的认为您应该针对它打开一个新问题并提供更多详细信息。

Answer 2

你的意思是这样的吗？

let cities = cityJsonObj.cities.map(c => c.city);
let lats = cityJsonObj.cities.map(c => c.lat);
let lons = cityJsonObj.cities.map(c => c.lon);

Answer 3

这与 React 无关。 这只是将数组映射到不同的格式。 您需要查找纯理解的是 javascript 的Array map 方法。

使用map您可以创建一个函数，该函数将接收原始数组的每个值，并返回一个新数组，该数组是该函数对旧数组的每个值的返回值的结果。

const originalArray = myJson.cities;
const names = originalArray.map(cityObj => cityObj.city);
const latitudes = originalArray.map(cityObj => cityObj.lat);
const longitudes = originalArray.map(cityObj => cityObj.lon);

诸如cityObj => cityObj.city之类的cityObj => cityObj.city只是箭头函数，它们是编写函数的速记方式。 这与function(cityObj) { return cityObj.city; } function(cityObj) { return cityObj.city; }

因此，每次运行map它都会循环遍历数组，通过给定函数运行每个值，并返回一个新数组，其中这些函数调用的结果作为新数组中的每个值。 这使得获取操作其他现有数组的新数组变得非常简单和简洁。

如果处理速度是一个问题，您也可以随时简单地创建 3 个空数组（ names 、 latitudes 、 longitudes ），然后循环遍历原始数组，使用myArray.push(valueToAdd)将遇到的每个值添加到相应的数组中。 这意味着 1 个循环而不是 3 个（每次映射它都会循环遍历它们）。 但是除非您必须重复执行此操作（例如，如果每次 React 渲染组件时都需要重新计算），保持代码简洁并仅使用map通常更值得。