Reputation: 125
I have data being pulled from Firebase and I am trying to display it on my react app, however, I am only able to display the "id" part on my app, I have no way of how to display the nested word array items. The firebase data connection works because I can display the ID in the react app and I can display the entire data in the console.
The Problem: I cannot display the nested items, only the "id" item displays on the react app. I am trying to display the "average_sum" number in my app.
Console log output of my data:
[{
"id":"1573671080",
"word": {
"Extra_data": {
"Average_Sum": 23.151
},
"User_data": {
"Counts": [51, 19, 35, 34, 48, 38, 21, 21, 31, 28, 25, 23, 25, 17, 54, 46, 24, 19, 28, 27, 26, 25, 25, 11, 25, 34, 60, 32, 36, 11, 23, 47]
}
}
},
{
"id":"1573671081",
"word": {
"Extra_data": {
"Average_Sum": 19.299999
},
"User_data": {
"Counts": [21, 19, 35, 34, 38, 38, 21, 21, 31, 28, 25, 23, 25, 17, 54, 46, 24, 19, 28, 27, 26, 25, 25, 11, 25, 34, 40, 32, 36, 11, 23, 47]
}
}
},
{
"id":"1573671082",
"word": {
"Extra_data": {
"Average_Sum": 34.12431
},
"User_data": {
"Counts": [26, 49, 35, 34, 38, 38, 21, 21, 31, 28, 25, 23, 25, 17, 54, 46, 24, 19, 28, 27, 26, 25, 25, 11, 25, 34, 40, 32, 33, 11, 23, 47]
}
}
}]
My React Code that proper displays all the "id" values from the console log output, these id's are displayed on the react app being pulled from firebase.
import React, { Component } from "react";
import firebase from "../Firebase.js";
class App extends Component {
constructor(props) {
super(props);
this.state = {
myData: [],
};
};
componentDidMount() {
const wordRef = firebase.database().ref('MyDatabase');
wordRef.on('value', (snapshot) => {
console.log(snapshot.val());
let words = snapshot.val();
let newState = [];
for (let word in words) {
newState.push({
id: word,
word: words[word]
})
}
this.setState({
words: newState
})
});
};
};
render() {
console.log('Out Put of State Data' + JSON.stringify(this.state.words))
return (
<div className='App'>
{this.state.words.map((word) => {
return (
<div>
<h3>{word.id}</h3>
</div>
)
})}
</div>);
}
}
export default App;
How I've tried to display nested elements, which doesn't work:
render() {
console.log('Out Put of State Data' + JSON.stringify(this.state.words))
return (
<div className='App'>
{this.state.words.map((word) => {
return (
<div>
<h3>{word.id} - {word.word[Extra_Data][Average_Sum]</h3>
</div>
)
})}
</div>
);
}
Upvotes: 0
Views: 1155
Reputation: 1514
What you're doing right here is adding the whole object again to the object key
word:
newState.push({
id: word,
word: words[word]
})
That means that id
is getting an index
and word
is getting the whole object. I imagine that's now what you want, but if you want to keep things like that, then the word
you're looking for is in word.word.word
. For example:
render() {
console.log('Out Put of State Data' + JSON.stringify(this.state.words))
return (
<div className='App'>
{this.state.words.map((word) => {
return (
<div>
<h3>{word.word.id} - {word.word.word['Extra_data']['Average_Sum']}</h3>
</div>
)
})}
</div>
);
}
Here's the full code if you want to play around and change the way you store that object when you receive your response from firebase:
Another way of approaching this is to change the way you add your object to your newState
array to:
newState.push({
id: words[word].id,
word: words[word].word
});
By doing that, you can access an element of that array later in your render
like:
<h3>
{word.id} - {word.word["Extra_data"]["Average_Sum"]}
</h3>
Here's an example of that second approach:
Upvotes: 2
Reputation: 6674
At the very least, your render()
function has got some syntax errors. Particularly this line:
<h3>{word.id} - {word.word[Extra_Data][Average_Sum]</h3>
// ^ Didn't close your {} brackets
Also you are referencing variables named Extra_Data
and Average_Sum
when presumably you are trying to reference those keys.
Try either of the following instead:
word.word.Extra_Data.Average_Sum
word.word['Extra_Data']['Average_Sum']
Finally, your render function might look like this:
render() {
console.log("Out Put of State Data" + JSON.stringify(this.state.words));
return (
<div className="App">
{this.state.words.map(word => {
return (
<div>
<h3>
{word.id} - {word.word["Extra_Data"]["Average_Sum"]}
</h3>
</div>
);
})}
</div>
);
};
Upvotes: 2