React - 迭代JSON对象

时间：2018-04-17 06:42:25

标签： json reactjs

我是Javascripting和React JS编码的新手。我有这个JSON对象 - 

var json1 = {"facilities":{"facility":[{"facilityCode":"J0LN","facilityId":"1","facilityName":"J0LN","npid":"1295718450","pid":"123457","providerState":"Alabama"},{"facilityCode":"K0NS","facilityId":"2","facilityName":"K0NS","npid":"9696969669","pid":"111111","providerState":"Alaska"},{"facilityCode":"J0LN1","facilityId":"3","facilityName":"J0LN1","npid":"111111111","pid":"221133","providerState":"Alabama"},{"facilityCode":"0987654321","facilityId":"4","facilityName":"0987654321","npid":"0987654321","pid":"235675","providerState":"Alabama"},{"facilityCode":"7776667676","facilityId":"5","facilityName":"7776667676","npid":"7776667676","pid":"236576","providerState":"Alabama"},{"facilityCode":"979797977","facilityId":"6","facilityName":"979797977","npid":"979797977","pid":"325347","providerState":"Alabama"},{"facilityCode":"9898989898","facilityId":"7","facilityName":"9898989898","npid":"9898989898","pid":"989898","providerState":"Alabama"},{"facilityCode":"121212","facilityId":"8","facilityName":"121212","npid":"1212120022","pid":"121212","providerState":"Connecticut"},{"facilityCode":"141414","facilityId":"9","facilityName":"141414","npid":"1414140022","pid":"141414","providerState":"Delaware"},{"facilityCode":"887766","facilityId":"10","facilityName":"887766","npid":"8877660022","pid":"887766","providerState":"Delaware"},{"facilityCode":"212121","facilityId":"11","facilityName":"OP-212121-OP","npid":"2121210022","pid":"212121","providerState":"Maryland"},{"facilityCode":"717171","facilityId":"12","facilityName":"IP-Qrtly-717171","npid":"7171710022","pid":"717174","providerState":"Alabama"},{"facilityCode":"RMC","facilityId":"13","facilityName":"RMC","npid":"1","pid":"676767","providerState":"Alabama"},{"facilityCode":"WCC","facilityId":"14","facilityName":"WCC","npid":"2","pid":"454676","providerState":"Alabama"},{"facilityCode":"FC","facilityId":"15","facilityName":"FN","npid":"1992813240","pid":"123456","providerState":"Alabama"},{"facilityCode":"VCC","facilityId":"16","facilityName":"VCC","npid":"1213121312","pid":"122312","providerState":"Alabama"},{"facilityCode":"AAAAA","facilityId":"17","facilityName":"AAAAA","npid":"3","pid":"112233","providerState":"Alabama"},{"facilityCode":"AAAAB","facilityId":"18","facilityName":"AAAAB","npid":"4","pid":"334455","providerState":"Alabama"},{"facilityCode":"AAAAC","facilityId":"19","facilityName":"AAAAC","npid":"5","pid":"556677","providerState":"Alabama"},{"facilityCode":"AAAAD","facilityId":"20","facilityName":"AAAAD","npid":"6","pid":"778899","providerState":"Alabama"},{"facilityCode":"AAAAE","facilityId":"21","facilityName":"AAAAE","npid":"7","pid":"616161","providerState":"Alabama"},{"facilityCode":"AAAAF","facilityId":"22","facilityName":"AAAAF","npid":"8","pid":"626262","providerState":"Alabama"},{"facilityCode":"AAAAG","facilityId":"23","facilityName":"AAAAG","npid":"9","pid":"717171","providerState":"Alabama"},{"facilityCode":"AAAAH","facilityId":"24","facilityName":"AAAAH","npid":"10","pid":"727272","providerState":"Alabama"},{"facilityCode":"AAAAI","facilityId":"25","facilityName":"AAAAI","npid":"11","pid":"757575","providerState":"Alabama"},{"facilityCode":"AAAAJ","facilityId":"26","facilityName":"AAAAJ","npid":"12","pid":"767676","providerState":"Alabama"},{"facilityCode":"AAAAK","facilityId":"27","facilityName":"AAAAK","npid":"13","pid":"818181","providerState":"Alabama"},{"facilityCode":"AAAAL","facilityId":"28","facilityName":"AAAAL","npid":"14","pid":"828282","providerState":"Alabama"},{"facilityCode":"AAAAM","facilityId":"29","facilityName":"AAAAM","npid":"15","pid":"858585","providerState":"Alabama"},{"facilityCode":"AAAAN","facilityId":"30","facilityName":"AAAAN","npid":"16","pid":"868686","providerState":"Alabama"},{"facilityCode":"AAAAO","facilityId":"31","facilityName":"AAAAO","npid":"17","pid":"919191","providerState":"Alabama"},{"facilityCode":"AAAAP","facilityId":"32","facilityName":"AAAAP","npid":"18","pid":"929292","providerState":"Alabama"},{"facilityCode":"AAAAQ","facilityId":"33","facilityName":"AAAAQ","npid":"19","pid":"959595","providerState":"Alabama"},{"facilityCode":"AAAAR","facilityId":"34","facilityName":"AAAAR","npid":"20","pid":"969696","providerState":"Alabama"},{"facilityCode":"UNIQUE","facilityId":"35","facilityName":"UNIQUE","npid":"21","pid":"123456","providerState":"Alabama"}]}};

我在这里设置我的数据状态并绑定它（不知道为什么我这样做，但我看到每个人都在做他们的ajax调用的一部分）

var stateSet = function(data) {         
    this.setState({data: json1});
};

stateSet.bind(this); // attempt to mock an AJAX call here, by assuming we have already obtained the JSON object.

return(
    <table>
        <tbody>
            <tr>
                <th>Facility Code</th>
                <th>Facility ID</th>
                <th>Facility Name</th>
                <th>NPID</th>
                <th>PID</th>
                <th>Provider State</th>
            </tr>
            {
                this.state.data.map(function(facility, key) {
// I'm not sure if the control is entering this function, and I don't understand why
                    return (
                        <tr>
                            <td>{facility.facilityCode}</td>
                            <td>{facility.facilityId}</td>
                            <td>{facility.facilityName}</td>
                            <td>{facility.npid}</td>
                            <td>{facility.pid}</td>
                            <td>{facility.providerState}</td>
                        </tr>
                    );
                })
            }
        </tbody>
    </table>
);

正如我在代码中提到的，作为评论的一部分，我不认为控件正在进入this.state.data.map(function(facility, key) {功能，我不明白为什么。

5 个答案:

答案 0 :(得分：2)

您的数组路径不正确，还会检查this.state.data的可用性，以便在data不可用时不会失败，

{this.state.data && this.state.data.facilities.facility.map(function(facility, key) {}}

答案 1 :(得分：2)

您未正确定位facility数组。

应该是this.state.data.facilities.facility.map，您也可以直接在json1中将state设置为constructor 

 constructor() {
    super();
    var json1 = {
      facilities: {
        facility: [
          {
            facilityCode: "J0LN",
            facilityId: "1",
            facilityName: "J0LN",
            npid: "1295718450",
            pid: "123457",
            providerState: "Alabama"
          } ....
        ]
      }
    };

    this.state = {
      data: json1
    };
  }

Working Snippet

答案 2 :(得分：1)

你在一个只有prop的对象上使用map函数，这是不可能的。 json对象唯一的支持是设施

答案 3 :(得分：1)

var stateSet = function(data) {         
    this.setState({data: json1});
};

为什么使用函数（日期），这不是必需的。只需给出function（），因为我认为stateSet首先不会在任何地方被调用，所以它不会被触发，你期望在该函数中使用prop。

答案 4 :(得分：1)

根据您的问题，很明显您正在尝试访问设施对象中的设施数组。

你可以这样做：

this.state.data.facilities.facility.map((elementOffFacilityArray,index) => { // do whatever you would like to do with individual elements of the array. })

但是当这个map函数执行时，可能是这个设施数组可能是空的，这将导致@nrgwsth已经指出错误。因此，您必须保持检查，此案例的上述表达式将变为：

{
  this.state.data &&
    this.state.data.facilities && 
     this.state.data.facilities.facility ?
      this.state.data.facilities.facility.map((elementOffFacilityArray,index) => 
        { 
          // do whatever you would like to do with individual elements of 
             the array.
        })
        :
        ''
}
相关问题
最新问题