Question

我正在尝试迭代以下JSON文档以获取溜冰场的名称：

我可以得到一个名字;但是，我想要做的是遍历所有条目（有253）并返回所有名称的列表。

这是我的React组件：

class Patinoire extends Component {
    constructor(props) {
        super(props);
        this.state = { patinoires: [] };
    }

    componentDidMount() {
        var url = 'http://localhost:3000/patinoires'
        fetch(url).then(function(response) {
            if (response.status >= 400) {
                throw new Error("Bad response from server");
            }
            return response.json();
        })
        .then(data => this.setState ({ patinoires: data.patinoires }));
    }

    render() {
        var patinoires = this.state.patinoires;
        var pjs2 = Object.values(patinoires);
        var pjs3 = pjs2.map(x => x["2"].nom);

        return <div>{pjs3}</div>
    }
}

现在，当使用{pjs3}时，我得到了JSON文档的第3个溜冰场的名称。如何遍历所有条目并返回所有条目的name属性？

编辑：这是一个数据样本

{
    "patinoires": {
        "patinoire": [
            {
                "nom": [
                    "Aire de patinage libre, De la Savane (PPL)"
                ],
                "arrondissement": [
                    {
                        "nom_arr": [
                            "Côte-des-Neiges - Notre-Dame-de-Grâce"
                        ],
                        "cle": [
                            "cdn"
                        ],
                        "date_maj": [
                            "2018-01-12 09:08:25"
                        ]
                    }
                ],
                "ouvert": [
                    ""
                ],
                "deblaye": [
                    ""
                ],
                "arrose": [
                    ""
                ],
                "resurface": [
                    ""
                ],
                "condition": [
                    "Mauvaise"
                ]
            },
            {
                "nom": [
                    "Aire de patinage libre, Georges-Saint-Pierre (PPL)"
                ],
                "arrondissement": [
                    {
                        "nom_arr": [
                            "Côte-des-Neiges - Notre-Dame-de-Grâce"
                        ],
                        "cle": [
                            "cdn"
                        ],
                        "date_maj": [
                            "2018-01-12 09:08:25"
                        ]
                    }
                ],
                "ouvert": [
                    ""
                ],
                "deblaye": [
                    ""
                ],
                "arrose": [
                    ""
                ],
                "resurface": [
                    ""
                ],
                "condition": [
                    "Mauvaise"
                ]
            }
        ]
    }
}

Answer 1

您可以使用Array.prototype.reduce()结合Array.prototype.map()或Array.prototype.forEach()来展平结果数据。

这是一个正在运行的例子：

＆＃13;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      patinoires: {
        patinoire: [
          {
            nom: ["Aire de patinage libre, De la Savane (PPL)"],
            arrondissement: [
              {
                nom_arr: ["Côte-des-Neiges - Notre-Dame-de-Grâce"],
                cle: ["cdn"],
                date_maj: ["2018-01-12 09:08:25"]
              }
            ],
            ouvert: [""],
            deblaye: [""],
            arrose: [""],
            resurface: [""],
            condition: ["Mauvaise"]
          },
          {
            nom: ["Aire de patinage libre, Georges-Saint-Pierre (PPL)"],
            arrondissement: [
              {
                nom_arr: ["Côte-des-Neiges - Notre-Dame-de-Grâce"],
                cle: ["cdn"],
                date_maj: ["2018-01-12 09:08:25"]
              }
            ],
            ouvert: [""],
            deblaye: [""],
            arrose: [""],
            resurface: [""],
            condition: ["Mauvaise"]
          }
        ]
      }
    };
  }

  renderData = () => {
    const { patinoires } = this.state;
    const markup = patinoires.patinoire.reduce((result, current) => {
      current.nom.map(n => {
        return result.push(<div>{n}</div>);
      });
      return result;
    }, []);
    return markup;
  }

  render() {
    return <div>{this.renderData()}</div>;
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

Answer 2

试试这个：

var pjs2 = Object.values(patinoires);
var names = pjs2.reduce((accumulator, elem) => {
   if (elem.patinoire) {
       elem.patinoire.forEach(part => {
           if(part.nom) {
              part.nom.forEach((name) => accumulator.push(name));
           }
       });
   }
   return accumulator;
}, []);

迭代JSON对象以获取具有属性的所有对象

2 个答案: