时间戳

首页 > 解决方案 > 如何通过 ReactJs 将巨大的 Json 转换为数组

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

问题描述

我有以下包含 2000 多个城市信息的 JSON 数据。在我的反应应用程序中，如果我可以将它们转换为数组，我可以使用这些 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 数据中，我如何制作城市数组和 lat 数组和 lon 数组？

更新的问题：

因为我正在学习 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>

标签： javascriptarraysjsonreactjs

解决方案

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

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()我们在之前创建的三个数组中添加一个新值：

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

注意：这种方法比 a 效率高很多，.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()而不是，因为返回某种新数组（理想情况下，在这种情况下，可以由 React 呈现的东西，如组件数组），而返回 undefined 这没有帮助。.forEach().map().forEach()

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

推荐阅读