Popular posts

A lot of times when I'm just trying to test something with fake data I'll just put the JSON into a javascript object and import it into my file. If it's non-parsed JSON that's basically just a big string I first just go into the development tools console of chrome and do a JSON.parse(); of the string. And then copy and paste the output into an object.

So if I had this sample JSON:

{
  "data": {
    "forms": [
      {
        "id": -4,
        "name": "New Form 2",
        "published": false,
        "publishedDate": null,
        "format": "[\"g:-1\", \"g:-4\"]",
        "groups": [
          {
            "id": -1,
            "name": "Testing Edit",
            "format": "[]",
            "settings": "{\"locked\": false, \"showTitle\": true}",
            "type": "SECTION"
          },
          {
            "id": -4,
            "name": "Section",
            "format": "[]",
            "settings": "{\"locked\": false, \"showTitle\": true}",
            "type": "SECTION"
          }
        ]
      }
    ]
  }
}

I would just put it in a file called fakeData.js and just have it export the object:

// fakeData.js

const jsonResponse = {
  "data": {
    "forms": [
      {
        "id": -4,
        "name": "New Form 2",
        "published": false,
        "publishedDate": null,
        "format": "[\"g:-1\", \"g:-4\"]",
        "groups": [
          {
            "id": -1,
            "name": "Testing Edit",
            "format": "[]",
            "settings": "{\"locked\": false, \"showTitle\": true}",
            "type": "SECTION"
          },
          {
            "id": -4,
            "name": "Section",
            "format": "[]",
            "settings": "{\"locked\": false, \"showTitle\": true}",
            "type": "SECTION"
          }
        ]
      }
    ]
  }
};

export jsonResponse;

Then in your other file you just import that object and reference it in your component:

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

// Fake Data
import { jsonResponse } from './fakeData';

import {NavBar} from './NavBar/navbar';
import {Concert} from './Concert/concert';


ReactDOM.render(<NavBar />, document.getElementById('navbar'));
ReactDOM.render(<Concert source={jsonResponse} />, document.getElementById('concert'));
registerServiceWorker();

Might be a quick workaround if all you're attempting to do is work with fake data to get better at using react.

Another option would be to use jsonstub.com