Ich bin neu in der Javascripting- und React JS-Codierung. Ich habe dieses JSON-Objekt-

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

Ich setze hier den Status meiner Daten und binde sie (nicht sicher, warum ich das tue, aber ich sehe, dass jeder dies als Teil seiner Ajax-Aufrufe tut).

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

Wie ich im Code als Teil des Kommentars erwähnt habe, glaube ich nicht, dass das Steuerelement die Funktion this.state.data.map(function(facility, key) { eingibt, und ich verstehe nicht, warum.

-1
AlwaysALearner 17 Apr. 2018 im 09:42

5 Antworten

Beste Antwort

Sie zielen nicht richtig auf das Array facility.

Es sollte this.state.data.facilities.facility.map sein, und Sie können Ihr json1 auch direkt in Ihrem constructor auf state setzen

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

    this.state = {
      data: json1
    };
  }

Arbeitsausschnitt

2
Ahsan Ali 17 Apr. 2018 im 07:16

Wenn Sie einen falschen Pfad zum Array haben, fügen Sie auch eine Überprüfung der Verfügbarkeit von this.state.data hinzu, damit dies nicht fehlschlägt, wenn data nicht verfügbar ist.

{this.state.data && this.state.data.facilities.facility.map(function(facility, key) {}}
2
Anurag Awasthi 17 Apr. 2018 im 06:45

Sie verwenden eine Kartenfunktion für ein Objekt, das nur über Requisiten verfügt. Dies ist nicht möglich. Die einzige Requisite, die das JSON-Objekt hat, sind Einrichtungen

1
Achraf C. 17 Apr. 2018 im 06:46
var stateSet = function(data) {         
    this.setState({data: json1});
};

Warum verwenden Sie die Funktion (Datum), dies wird nicht benötigt. Geben Sie einfach function (), weil ich denke, dass das stateSet zunächst nirgendwo aufgerufen wird, damit es nicht ausgelöst wird und Sie eine Requisite in dieser Funktion erwarten.

1
Achraf C. 17 Apr. 2018 im 07:00

Aus Ihrer Frage geht hervor, dass Sie versuchen, auf das Array Facility im Facility-Objekt zuzugreifen.

Sie können dies erreichen als:

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

Zum Zeitpunkt der Ausführung dieser Zuordnungsfunktion kann es jedoch vorkommen, dass dieses Facility-Array leer ist, was zu einem Fehler führt, auf den @nrgwsth bereits hingewiesen hat. Daher müssen Sie die Prüfung beibehalten, und der obige Ausdruck für diesen Fall lautet wie folgt:

{
  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.
        })
        :
        ''
}
1
Vikas Yadav 17 Apr. 2018 im 07:07