Reputation: 41
I have a JSON file (named journey0.json) in which I store data as shown below.
{
"title": "journy title",
"date": "2020",
"homepageImage": "/images/journey1/TravelCardImage",
"introStory": "text",
"introMap": "",
"destinations": [
{
"destinationTitle": "Berlijn",
"destinationStory": "destination story",
"destinationPreviewImage": "/images/journey1/prague.jpg",
"destinationImages": [
{
"original": "/images/journey1/HomeHeader.jpg",
"thumbnail": "/images/journey1/HomeHeader.jpg"
},
{
"original": "/images/journey1/HomeHeader.jpg",
"thumbnail": "/images/journey1/HomeHeader.jpg"
},
{
"original": "/images/journey1/HomeHeader.jpg",
"thumbnail": "/images/journey1/HomeHeader.jpg"
},
]
}
]
}
I then make an array of all similar JSON files in another file (which is .jsx) as seen below:
import * as journey0 from './journey0.json'
export const allJourneysArray = [
journey0
]
export default allJourneysArray;
I try to access the data as seen below but for some reason the values remain undefined. What am I doing wrong?
import JourneyCard from '../journeyCard/JourneyCard';
import allJourneysArray from '../../../journeys/allJourneys';
class HomePageBody extends Component {
render() {
let journeyCards = [];
for (var x in allJourneysArray) {
journeyCards.push(
<Link style={this.styles.link} to={'/' + x}>
<JourneyCard
title={allJourneysArray[x].title}
date={allJourneysArray[x].date}
homepageImage={allJourneysArray[x].homepageImage}/>
</Link>
)
}
return(
<div style={this.styles.container}>
<div style={this.styles.cardContainer}>
{journeyCards}
</div>
</div>
);
}
Upvotes: 0
Views: 32