Import JSON data in to array in REACTJS

Question

So ive been looking at this for a couple hours now trying to get my head around it but I just cant figure it out.

I have a json file located at '/src/data/topbar.json' which i want to include in my topbar-container component which will be used to generate the top menu.

What am I doing wrong here?

topbar.json:

{
  "topbarLinks": [
    {
      "id": 1,
      "icon": "header__topbar__list__link__icon glyphicon glyphicon-home",
      "text": "home",
      "link": "/"
     },
     {
      "id": 2,
      "icon": "header__topbar__list__link__icon glyphicon glyphicon-euro",
      "text": "Pricing",
      "link": "/pricing"
     },
     {
      "id": 3,
      "icon": "header__topbar__list__link__icon glyphicon glyphicon-exclamation-sign",
      "text": "Help",
      "link": "/help"
     },
     {
      "id": 4,
      "icon": "header__topbar__list__link__icon glyphicon glyphicon-question-sign",
      "text": "FAQ",
      "link": "/faq"
     },
     {
      "id": 5,
      "icon": "header__topbar__list__link__icon glyphicon glyphicon-edit",
      "text": "Register",
      "link": "/register"
     },
     {
      "id": 6,
      "icon": "header__topbar__list__link__icon glyphicon glyphicon-share",
      "text": "Login",
      "link": "/login"
     }
  ]
}

topbar-container.js

import React, { Component } from 'react';

import './topbar-container.scss';
import Link from '../topbar-link/topbar-link';
require ('../../data/topbar.json');

class TopbarContainer extends Component {
  constructor() {
    super();
    this.State = {
      topbarLinks: []
    }
  }

  componentDidMount() {
    fetch('../../data/topbar.json')
      .then(results => {
        return results.json();
      }).then(data => {
        let topbarLinks = data.results.map((topbarLinks, key) => {
          return (
            <Link
              key={topbarLinks.id}
              text={topbarLinks.text}
              icon={topbarLinks.icon}
              link={topbarLinks.link}
            />
          )
        })
      })
  }

  render() {
    return (
      <div className="container-fluid header__topbar">
        <div className="row">
          <div className="container">
            <ul className="header__topbar__list">
              {this.state.topbarLinks}
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

export default TopbarContainer;

linasmnew · Accepted Answer · 2017-10-06 13:40:20Z

4

You can't fetch a local JSON file, you either have to import it, or setup a webserver that will serve that JSON file

import myJson from '../../data/topbar.json';

Then just map over it and don't forget to setState

componentDidMount() {
    let topbarLinks = myJson.topbarLinks.map((topbarLinks, key) => {
      return (
        <Link
          key={topbarLinks.id}
          text={topbarLinks.text}
          icon={topbarLinks.icon}
          link={topbarLinks.link}
        />
      )
    })
    this.setState({topbarLinks: topbarLinks});  // <--
    //or just this.setState({ topbarLinks });
  }

and as somebody else noted this.state has to be lowercase

edited Oct 6, 2017 at 13:40

answered Oct 3, 2017 at 15:50

linasmnew

3,9772 gold badges23 silver badges33 bronze badges

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

7 Comments

MarkHughes88 Over a year ago

this sends back the following error: Line 32: 'topbarLinks' is not defined no-undef

linasmnew Over a year ago

console.log topbarLinks to see what it returns before assigning it to state

MarkHughes88 Over a year ago

it sends back an undefined error: Uncaught TypeError: Cannot read property 'topbarLinks' of null

linasmnew Over a year ago

try data.topbarLinks.map instead of data.results.map

MarkHughes88 Over a year ago

still doesnt work. error: 'topbarLinks' is not defined no-undef

|

Mo. · Accepted Answer · 2018-09-12 05:40:22Z

1

topbar.json:

export default {
  "topbarLinks": []
}

then you can simply import it without fetch

import data from '../../data/topbar.json'
let topbarLinks = data.results.map((topbarLinks, key) => {
  return (
;

edited Sep 12, 2018 at 5:40

Mo.

27.6k36 gold badges167 silver badges234 bronze badges

answered Oct 4, 2017 at 6:40

Pramendra Gupta

14.9k4 gold badges35 silver badges35 bronze badges

Comments

uprightbassfan78 · Accepted Answer · 2017-10-03 16:04:54Z

0

I don't think that State should be capitalized in this.State in your constructor.

answered Oct 3, 2017 at 16:04

uprightbassfan78

3521 gold badge3 silver badges16 bronze badges

Comments

Elumalai Kaliyaperumal · Accepted Answer · 2017-10-03 16:09:54Z

0

Change map function to data.topbarLinks.map to access json data.

let topbarLinks = data.topbarLinks.map((topbarLinks, key) => {
      return (
        <Link
          key={topbarLinks.id}
          text={topbarLinks.text}
          icon={topbarLinks.icon}
          link={topbarLinks.link}
        />
      )
    })

And then set state

this.setState({topbarLinks: topbarLinks});

Change your initial state as this.State to this.state in constructor.

edited Oct 3, 2017 at 16:09

answered Oct 3, 2017 at 16:02

Elumalai Kaliyaperumal

1,5301 gold badge13 silver badges24 bronze badges

Collectives™ on Stack Overflow

Import JSON data in to array in REACTJS

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related