Jak przechowywać dane z odpowiedzi JSON API na tablicę w ReactJS?
Mam więc skonfigurowaną bazę danych i próbuję wyodrębnić z niej informacje i przechowywać je w szeregu stanów, aby móc z nich korzystać na stronie internetowej.
To jest przykład tego, co otrzymuję, gdy żądam formularza bazy danych, skróconego dla czytelności
{
"count": 10,
"next": null,
"previous": null,
"results": [
{
"var1": "Test",
"var2": "",
"NeededInfo": "name1",
},
{
"var1": "Test",
"var2": "",
"NeededInfo": "name2",
}
]
}Dlatego muszę pobrać NeededInfo każdego obiektu i przechowywać go w tablicy, aby móc go używać w render (). To jest to, co próbuję zrobić, ale kiedy robię printToConsole () (nie pokazano, ale tylko console.log (this.state)), aby zobaczyć, jak wygląda tablica stanów, "inna" tablica jest niezdefiniowana
const title_URL = "[url=http://123.456.789/namelist";class]http://123.456.789/namelist";class[/url] Project extends Component {
constructor(props) {
super(props); this.state = {
random1: "",
random2: "",
other: [],
items: []
}
} componentDidMount() {
fetch(title_URL)
.then(response => {
return response.json();
})
.then(data => {
this.setState({
other: data.results.NeededInfo
})
});
}
Potrzebuję tablicy „other”, aby wyglądała tak
other: ["name1", "name2"]ponieważ w moim render () muszę wypisać nazwy, które strona pobiera z bazy danych, aby użytkownik mógł zobaczyć nazwy wymienionych pozycji i zrobić z nimi kilka innych rzeczy, a potem mogę je przechowywać w "items" tablica w nowej kolejności, ale ta część działa, jeśli mam ustawienie wstępne tablicy „inne”.
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
3 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
other: data.results.map(({ NeededInfo }) => NeededInfo)Anonimowy użytkownik
Potwierdzenie od:
Nie możesz uzyskać dostępu do właściwości dokumentów w tej tablicy bez poinformowania JavaScript, gdzie te dokumenty znajdują się w tablicy (indeks wymaganego dokumentu).
Utwórz pętlę for, użyj I start od 0, do długości wyników i możesz użyć tej właściwości dokumentów.
Anonimowy użytkownik
Potwierdzenie od:
<pre class="lang-js prettyprint-override">
componentDidMount() {fetch(title_URL)
.then(response => {
return response.json();
})
.then(data => {
// Here you need to use an temporary array to store NeededInfo only
let tmpArray = []
for (var i = 0; i < data.results.length; i++) {
tmpArray.push(data.results[i].NeededInfo)
} this.setState({
other: tmpArray
})
});
}