Why can't I retrieve data from my JSON file in ReactJS?

Question

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

Ivan V. · Accepted Answer · 2020-12-12 13:09:32Z

1

Try: import journey0 from './journey0.json'

answered Dec 12, 2020 at 13:09

Ivan V.

8,1692 gold badges39 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stanley Over a year ago

This would require me to import each new journey file (journey1.json, journey2.json, etc.) in all places where I want to use the data. Is there a better approach?

Collectives™ on Stack Overflow

Why can't I retrieve data from my JSON file in ReactJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related