React-遍历JSON对象

Question

I am new to Javascripting and React JS coding. I have this JSON object-

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"}]}};

I am setting the state of my data here and binding it (not sure why I am doing this, but I see everyone doing it as part of their ajax calls)

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

As I've mentioned in the code as part of the comment, I don't think the control is entering this.state.data.map(function(facility, key) { function and I don't understand why.

Answer 1

您使用不正确的路径访问数组，还添加了对this.state.data可用性的检查，以便在data不可用时不会失败，

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

Answer 2

You're not targeting the facility array correctly.

It should be this.state.data.facilities.facility.map , and you may also set your json1 to state in your constructor directly like so

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

    this.state = {
      data: json1
    };
  }

Working Snippet

Answer 3

You re are use a map function on an object that has only on prop, this is not possible. The only prop the json object has is facilities

Answer 4

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

why are you using function(date), this is not needed. Just give function(), because i think the stateSet is firstly not called anywhere so it doesn t get triggerd and you re expecting a prop in that function.

Answer 5

From your question, it is clear that you are trying to access the facility array inside the facilities object.

You can achieve this as:

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

But at the time when this map function will execute, it might be the case that this facility array may be empty which will result in error whic already has been pointed out by @nrgwsth. Thus, you will have to keep the check and the above expression for this case will become as :

{
  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.
        })
        :
        ''
}