Reagieren JS - Wie übertrage ich Variablen (Parameter) an die API-URL?
Ich habe eine einzelne Seite, die aus zwei dropdown-Liste der Komponenten; Die Seite ist nur zugänglich nach erfolgreicher Authentifizierung (gültiges token). Beide dropdown-Liste verbraucht ist es, Daten aus verschiedenen JSON-API. Ich habe eine dropdown-Liste funktionsfähig, aber für die anderen, die URL um die es-API-Parameter erfordern.
Beispiel-URL:
http://buildingsAPI:111/api/buildings/
getestet via Postbote mit einer id angehangen:
http://buildingsAPI:111/api/buildings/abcde-abce-abc2-111-2222
Json-Beispiel:
[
{
"abc_buildingid": "1111-2222-3333-aaa-1111117",
"abc_energyprogramid": "abcde-abce-abc2-111-2222",
"siteName": "Building 1",
"Available": false,
"clientName": "Client 1"
},
{
"abc_buildingid": "222-2222-3333-aaa-1111117",
"abc_energyprogramid": "xyz11-abce-abc2-111-2222",
"siteName": "Building 2",
"Available": false,
"clientName": "Client 2"
},
]
...bin schon den Erhalt des Tokens bei der die Benutzerauthentifizierung ("localStorage"), aber ich muss auch anfügen/übergeben Sie die abc_energyprogramid als parameter an die API-URL.
...den code:
constructor(props) {
super(props);
this.getToken = this.getToken.bind(this);
}
componentDidMount() {
const bearerToken = this.getToken();
fetch('http://buildingsAPI:111/api/buildings/?myparam1={abc_energyprogramid}', {
method: 'GET',
headers: {
'Content-type': 'application/json',
'Authorization': `Bearer ${bearerToken}`
},
})
.then(results => results.json())
.then(buildings => this.setState({ buildings: buildings }))
}
getToken() {
return localStorage.getItem('id_token');
}
render() {
console.log(this.state.buildings);
return(
<div>
<select className="custom-select" id="siteName">
{ this.state.buildings.map(item =>(
<option key={item.siteName}>{item.siteName}</option>
))
}
</select>
</div>
);
}
...Ich derzeit erhalte eine Fehlermeldung:" Unbehandelte Ablehnung (SyntaxError):unerwartetes Ende der JSON-input" - auf dieser Zeile des Codes: .dann(Ergebnis => Ergebnisse.json()). Könnte ich etwas Hilfe mit dieser bitte?
- Ich glaube, dein problem ist nicht hier, sondern mit Ihrem backend. Prüfen Sie, ob es ist die Rückkehr ordnungsgemäße json im response header und response body.
- Ihre json sieht eher aus wie ein array, vielleicht ist das das Problem?
- abc_energyprogramid ist Teil des Objekts (als string) in der JSON-Datei. {abc_energyprogramid} ...wäre dies der richtige Weg, um es zu übergeben?
- es ist ein array, das andere API-am Konsum für den Kunden hat das gleiche setup, und der code funktioniert, aber für die Gebäude, die API erfordert einen parameter am Ende; das ist der einzige Unterschied zwischen den beiden API ' s verbraucht
- versuchen Sie, diese
const param = 'abc_energyprogramid'
const a =http://buildingsAPI:111/api/buildings/?myparam1=${param}
Verwenden wieder Zecken von Anfang und Ende der variable einen Wert.. kann es nicht hier, es wird behandelt wie ein code
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich denke, das problem ist die Art und Weise Sie verweisen
abc_energyprogramid
Ändern:
zu:
Beachten Sie die back-ticks und ES6 template-string-literal.