CODEWITHSUNDEEP
jsonreactjsecmascript-6jsx
MarkHughes88
MarkHughes88

Reputation: 669

Import JSON data in to array in REACTJS

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;

Upvotes: 2

Views: 12304

Answers (4)

Pramendra Gupta
Pramendra Gupta

Reputation: 14873

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 (
;

Upvotes: 1

linasmnew
linasmnew

Reputation: 3977

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

Upvotes: 4

Elumalai Kaliyaperumal
Elumalai Kaliyaperumal

Reputation: 1520

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.

Upvotes: 0

uprightbassfan78
uprightbassfan78

Reputation: 352

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

Upvotes: 0

Related Questions