reactjs - load json object

Question

I have a file data.js:

   const sdc = [
  {
    "Type": "Buy",
    "Price": 0.00226752,
    "Amount": 55.95995977,
    "Total": 0.12689032
  },
  {
    "Type": "Buy",
    "Price": 0.00226752,
    "Amount": 146.1,
    "Total": 0.33128467
  },
  {
    "Type": "Buy",
    "Price": 0.00226684,
    "Amount": 150,
    "Total": 0.340026
  },
  {
    "Type": "Buy",
    "Price": 0.00226684,
    "Amount": 26.79415765,
    "Total": 0.06073806
  },
  {
    "Type": "Buy",
    "Price": 0.00226684,
    "Amount": 4.25269162,
    "Total": 0.00964017
  },
  {
    "Type": "Buy",
    "Price": 0.00226659,
    "Amount": 25.79415765,
    "Total": 0.05846477
  },
  {
    "Type": "Buy",
    "Price": 0.00225784,
    "Amount": 4.48789501,
    "Total": 0.01013294
  },
  {
    "Type": "Buy",
    "Price": 0.00226659,
    "Amount": 1,
    "Total": 0.00226659
  },
  {
    "Type": "Buy",
    "Price": 0.00226663,
    "Amount": 225,
    "Total": 0.50999175
  },
  {
    "Type": "Buy",
    "Price": 0.00226662,
    "Amount": 113.4736507,
    "Total": 0.25720164
  },
  {
    "Type": "Buy",
    "Price": 0.00226659,
    "Amount": 26.79415765,
    "Total": 0.06073136
  },
  {
    "Type": "Buy",
    "Price": 0.00226651,
    "Amount": 57.98798342,
    "Total": 0.13143034
  },
  {
    "Type": "Buy",
    "Price": 0.00226649,
    "Amount": 40.19123647,
    "Total": 0.09109303
  },
  {
    "Type": "Buy",
    "Price": 0.00224958,
    "Amount": 11.83690383,
    "Total": 0.02662806
  },
  {
    "Type": "Sell",
    "Price": 0.00241238,
    "Amount": 838,
    "Total": 2.02157444
  },
  {
    "Type": "Buy",
    "Price": 0.00231078,
    "Amount": 9.95795791,
    "Total": 0.02301064
  },
  {
    "Type": "Sell",
    "Price": 0.0025,
    "Amount": 4.1999832,
    "Total": 0.01049995
  },
  {
    "Type": "Sell",
    "Price": 0.0025,
    "Amount": 4.99998,
    "Total": 0.01249995
  },
  {
    "Type": "Buy",
    "Price": 0.00226702,
    "Amount": 3.63623022,
    "Total": 0.0082434
  },
  {
    "Type": "Buy",
    "Price": 0.00226702,
    "Amount": 2.14933238,
    "Total": 0.00487257
  },
  {
    "Type": "Buy",
    "Price": 0.00226702,
    "Amount": 15,
    "Total": 0.0340053
  },
  {
    "Type": "Buy",
    "Price": 0.00226702,
    "Amount": 56.80528353,
    "Total": 0.12877871
  },
  {
    "Type": "Buy",
    "Price": 0.00227634,
    "Amount": 76.88367619,
    "Total": 0.17501338
  },
  {
    "Type": "Sell",
    "Price": 0.0000141,
    "Amount": 12444,
    "Total": 0.17546011
  },
  {
    "Type": "Buy",
    "Price": 0.0000141,
    "Amount": 12131.09257,
    "Total": 0.1710484
  },
  {
    "Type": "Buy",
    "Price": 0.00001409,
    "Amount": 344.0847392,
    "Total": 0.00484815
  },
  {
    "Type": "Buy",
    "Price": 0.00249461,
    "Amount": 154.2853438,
    "Total": 0.38488176
  },
  {
    "Type": "Buy",
    "Price": 0.00249461,
    "Amount": 33.72938801,
    "Total": 0.08414166
  },
  {
    "Type": "Buy",
    "Price": 0.00246953,
    "Amount": 340.8737595,
    "Total": 0.84179797
  },
  {
    "Type": "Buy",
    "Price": 0.00246953,
    "Amount": 90.36231511,
    "Total": 0.22315244
  },
  {
    "Type": "Buy",
    "Price": 0.00246952,
    "Amount": 55.17093479,
    "Total": 0.13624572
  },
  {
    "Type": "Buy",
    "Price": 0.00246764,
    "Amount": 5.75660177,
    "Total": 0.01420522
  },
  {
    "Type": "Buy",
    "Price": 0.00245929,
    "Amount": 4.1587629,
    "Total": 0.0102276
  },
  {
    "Type": "Sell",
    "Price": 0.00252904,
    "Amount": 37.42985716,
    "Total": 0.0946616
  },
  {
    "Type": "Sell",
    "Price": 0.00252904,
    "Amount": 0.59310808,
    "Total": 0.00149999
  },
  {
    "Type": "Sell",
    "Price": 0.00252904,
    "Amount": 1.97703476,
    "Total": 0.00499999
  },
  {
    "Type": "Sell",
    "Price": 0.00252902,
    "Amount": 446.0229574,
    "Total": 1.12800097
  },
  {
    "Type": "Sell",
    "Price": 0.00252903,
    "Amount": 1.97704258,
    "Total": 0.00499999
  },
  {
    "Type": "Sell",
    "Price": 0.00259459,
    "Amount": 38.54173491,
    "Total": 0.09999999
  },
  {
    "Type": "Sell",
    "Price": 0.00259483,
    "Amount": 105.9381622,
    "Total": 0.27489152
  },
  {
    "Type": "Sell",
    "Price": 0.00259484,
    "Amount": 0.03853803,
    "Total": 0.0001
  },
  {
    "Type": "Sell",
    "Price": 0.00259484,
    "Amount": 0.03853803,
    "Total": 0.0001
  },
  {
    "Type": "Sell",
    "Price": 0.00259485,
    "Amount": 1.91102375,
    "Total": 0.00495881
  },
  {
    "Type": "Sell",
    "Price": 0.00259459,
    "Amount": 2,
    "Total": 0.00518918
  },
  {
    "Type": "Sell",
    "Price": 0.00259464,
    "Amount": 1.90549392,
    "Total": 0.00494407
  },
  {
    "Type": "Sell",
    "Price": 0.00259465,
    "Amount": 28.65568722,
    "Total": 0.07435147
  },
  {
    "Type": "Buy",
    "Price": 0.01740491,
    "Amount": 0.20683711,
    "Total": 0.00359998
  },
  {
    "Type": "Buy",
    "Price": 0.00238916,
    "Amount": 79.70696671,
    "Total": 0.19043269
  },
  {
    "Type": "Buy",
    "Price": 0.00237524,
    "Amount": 37.90636505,
    "Total": 0.09003671
  },
  {
    "Type": "Buy",
    "Price": 0.00237524,
    "Amount": 2.00494017,
    "Total": 0.00476221
  },
  {
    "Type": "Buy",
    "Price": 0.00237524,
    "Amount": 18.57724489,
    "Total": 0.04412541
  },
  {
    "Type": "Sell",
    "Price": 0.00585,
    "Amount": 56.99961222,
    "Total": 0.33344773
  },
  {
    "Type": "Sell",
    "Price": 0.00585,
    "Amount": 0.00007739,
    "Total": 4.5e-7
  },
  {
    "Type": "Sell",
    "Price": 0.00585,
    "Amount": 0.00031039,
    "Total": 0.00000181
  },
  {
    "Type": "Buy",
    "Price": 8.6e-7,
    "Amount": 2070,
    "Total": 0.0017802
  },
  {
    "Type": "Buy",
    "Price": 0.00187861,
    "Amount": 65.81153335,
    "Total": 0.1236342
  },
  {
    "Type": "Buy",
    "Price": 0.00187858,
    "Amount": 15.66747734,
    "Total": 0.0294326
  },
  {
    "Type": "Buy",
    "Price": 0.00187857,
    "Amount": 7.94470487,
    "Total": 0.01492468
  },
  {
    "Type": "Buy",
    "Price": 0.00187853,
    "Amount": 0.78814015,
    "Total": 0.00148054
  },
  {
    "Type": "Buy",
    "Price": 0.00187852,
    "Amount": 0.78814429,
    "Total": 0.00148054
  },
  {
    "Type": "Sell",
    "Price": 0.00054142,
    "Amount": 0.9975,
    "Total": 0.00054006
  },
  {
    "Type": "Buy",
    "Price": 8.6e-7,
    "Amount": 811.9167491,
    "Total": 0.00069824
  },
  {
    "Type": "Buy",
    "Price": 8.6e-7,
    "Amount": 338.0832509,
    "Total": 0.00029075
  },
  {
    "Type": "Buy",
    "Price": 0.00238719,
    "Amount": 72,
    "Total": 0.17187768
  },
  {
    "Type": "Buy",
    "Price": 0.00236363,
    "Amount": 4,
    "Total": 0.00945452
  },
  {
    "Type": "Sell",
    "Price": 0.00023501,
    "Amount": 41.1642077,
    "Total": 0.009674
  },
  {
    "Type": "Sell",
    "Price": 0.00023501,
    "Amount": 2.7697923,
    "Total": 0.00065092
  },
  {
    "Type": "Buy",
    "Price": 0.00000105,
    "Amount": 1270,
    "Total": 0.0013335
  },
  {
    "Type": "Buy",
    "Price": 0.00281001,
    "Amount": 360,
    "Total": 1.0116036
  },
  {
    "Type": "Buy",
    "Price": 0.00280001,
    "Amount": 3.33990832,
    "Total": 0.00935177
  },
  {
    "Type": "Sell",
    "Price": 0.0038,
    "Amount": 208,
    "Total": 0.7904
  },
  {
    "Type": "Sell",
    "Price": 0.00356245,
    "Amount": 1,
    "Total": 0.00356245
  },
  {
    "Type": "Sell",
    "Price": 0.00370002,
    "Amount": 0.02702689,
    "Total": 0.0001
  },
  {
    "Type": "Sell",
    "Price": 0.00370002,
    "Amount": 15.4008193,
    "Total": 0.05698333
  },
  {
    "Type": "Sell",
    "Price": 0.00370002,
    "Amount": 3.09119995,
    "Total": 0.0114375
  },
  {
    "Type": "Sell",
    "Price": 0.02315202,
    "Amount": 6.98549994,
    "Total": 0.16172843
  },
  {
    "Type": "Sell",
    "Price": 0.02315202,
    "Amount": 6e-8,
    "Total": 0
  },
  {
    "Type": "Buy",
    "Price": 0.00023492,
    "Amount": 40,
    "Total": 0.0093968
  },
  {
    "Type": "Sell",
    "Price": 0.00004456,
    "Amount": 40.3006157,
    "Total": 0.00179579
  },
  {
    "Type": "Sell",
    "Price": 0.00004461,
    "Amount": 112.0824927,
    "Total": 0.00499999
  },
  {
    "Type": "Sell",
    "Price": 0.00004462,
    "Amount": 33.61721201,
    "Total": 0.00149999
  },
  {
    "Type": "Sell",
    "Price": 0.00004463,
    "Amount": 33.60967959,
    "Total": 0.0015
  },
  {
    "Type": "Buy",
    "Price": 0.0002817,
    "Amount": 4,
    "Total": 0.0011268
  },
  {
    "Type": "Buy",
    "Price": 0.00003965,
    "Amount": 55.13060038,
    "Total": 0.00218592
  },
  {
    "Type": "Buy",
    "Price": 0.00003965,
    "Amount": 104.8693996,
    "Total": 0.00415807
  },
  {
    "Type": "Sell",
    "Price": 0.00004129,
    "Amount": 149.625,
    "Total": 0.00617801
  },
  {
    "Type": "Buy",
    "Price": 0.02215591,
    "Amount": 3,
    "Total": 0.06646773
  },
  {
    "Type": "Buy",
    "Price": 0.00004073,
    "Amount": 113.3174137,
    "Total": 0.00461541
  },
  {
    "Type": "Buy",
    "Price": 0.00004072,
    "Amount": 36.68258634,
    "Total": 0.00149371
  },
  {
    "Type": "Buy",
    "Price": 0.0000525,
    "Amount": 60,
    "Total": 0.00315
  },
  {
    "Type": "Buy",
    "Price": 0.01877317,
    "Amount": 4,
    "Total": 0.07509268
  },
  {
    "Type": "Buy",
    "Price": 0.00199501,
    "Amount": 43.10755334,
    "Total": 0.08599999
  },
  {
    "Type": "Buy",
    "Price": 0.00350201,
    "Amount": 53.48162609,
    "Total": 0.18729318
  },
  {
    "Type": "Buy",
    "Price": 0.00350201,
    "Amount": 132.1260678,
    "Total": 0.46270681
  },
  {
    "Type": "Sell",
    "Price": 0.02304826,
    "Amount": 17.03647964,
    "Total": 0.39266121
  },
  {
    "Type": "Sell",
    "Price": 0.02312381,
    "Amount": 3.52,
    "Total": 0.08139581
  },
  {
    "Type": "Sell",
    "Price": 0.02324002,
    "Amount": 3.39252036,
    "Total": 0.07884224
  },
  {
    "Type": "Buy",
    "Price": 0.02459958,
    "Amount": 7,
    "Total": 0.17219706
  },
  {
    "Type": "Buy",
    "Price": 0.01378499,
    "Amount": 9,
    "Total": 0.12406491
  },
  {
    "Type": "Buy",
    "Price": 0.00581178,
    "Amount": 1,
    "Total": 0.00581178
  },
  {
    "Type": "Buy",
    "Price": 0.01498881,
    "Amount": 7,
    "Total": 0.10492167
  },
  {
    "Type": "Sell",
    "Price": 0.00001717,
    "Amount": 176.6891735,
    "Total": 0.00303375
  },
  {
    "Type": "Sell",
    "Price": 0.00001718,
    "Amount": 87.31082654,
    "Total": 0.00149999
  },
  {
    "Type": "Buy",
    "Price": 0.00001464,
    "Amount": 182.8870467,
    "Total": 0.00267746
  },
  {
    "Type": "Buy",
    "Price": 0.00001464,
    "Amount": 32.11295335,
    "Total": 0.00047013
  },
  {
    "Type": "Buy",
    "Price": 0.00596086,
    "Amount": 26,
    "Total": 0.15498236
  },
  {
    "Type": "Buy",
    "Price": 0.000017,
    "Amount": 50,
    "Total": 0.00085
  },
  {
    "Type": "Buy",
    "Price": 0.0005388,
    "Amount": 1,
    "Total": 0.0005388
  },
  {
    "Type": "Buy",
    "Price": 0.00935588,
    "Amount": 0.00060288,
    "Total": 0.00000564
  },
  {
    "Type": "Buy",
    "Price": 0.00935588,
    "Amount": 0.99939712,
    "Total": 0.00935023
  },
  {
    "Type": "Buy",
    "Price": 0.01475001,
    "Amount": 1,
    "Total": 0.01475001
  },
  {
    "Type": "Buy",
    "Price": 0.00555,
    "Amount": 21.28693846,
    "Total": 0.1181425
  },
  {
    "Type": "Buy",
    "Price": 0.00553,
    "Amount": 9.26025155,
    "Total": 0.05120919
  }
]

I'm trying to load it with:

import React, {Component} from 'react';
import Header from './header/header';
import Body from './body/body';
import sdc from './data';



export default class App extends Component {
  constructor(props) {
    super();
    // Set the initial grid in
    this.state = {
      title: "Singularity is nigh!!!",
      sdc: sdc
    };
  }

  render() {


    return (
      // Add your component markup and other subcomponent references here.
      <div>
        <Header title={this.state.title} />
        <p>{this.state.sdc}</p>
        <Body />
      </div>

    );
  }
}

I have got an error saying that:

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of App.

Please advise. I'm trying to do some calculations on the values but first I need to load it and be able to extract values from the object.

Thanks

Edit:

Error:

/scripts/App.js
Module build failed: SyntaxError: Unexpected token (32:30)

  30 | 
  31 |   render() {
> 32 |     const renderedData = {this._renderData()}
     |                               ^
  33 | 
  34 | 
  35 |     return (

BabelLoaderError: SyntaxError: Unexpected token (32:30)

  30 | 
  31 |   render() {
> 32 |     const renderedData = {this._renderData()}
     |                               ^
  33 | 
  34 | 
  35 |     return (

EDIT 2:

import React, {Component} from 'react';
import Header from './header/header';
import Body from './body/body';
import sdc from './data';



export default class App extends Component {
  constructor(props) {
    super();
    // Set the initial grid in
    this.state = {
      title: "Singularity is nigh!!!",
      sdc: sdc
    };

  }

  _renderData(){
     const data = this.state.sdc
     return Object.keys(data).map(function(key,index){
       return ( <div key={datum.id}>
          <p>{datum.Type}</p>
          <p>{datum.Price}</p>
          //other properties
        </div> )
     })

  }

  render() {
    const renderedData = this._renderData()


    return (
      // Add your component markup and other subcomponent references here.
      <div>
        <p>{renderedData}</p>

      </div>

    );
  }
}

Harkirat Saluja · Accepted Answer · 2016-09-30 21:12:02Z

1

Ideally you should not render objects(or array) this way. The correct way is to iterate over the array(or object) and then printing the data. Somewhat like this:-

_renderData(){
   const data = this.state.sdc
   return Object.keys(data).map(function(key,index){
       const datum = data[key]
       return ( <div key={datum.id}>
        <p>{datum.Type}</p>
        <p>{datum.Price}</p>
        //other properties
      </div> )
   })

}

render(){

       const renderedData = this._renderData()
       return (

          // Add your component markup and other subcomponent references here.
          <div>
            <Header title={this.state.title} />
            <p>{renderedData}</p>
            <Body />
          </div>

        );
}

edited Sep 30, 2016 at 21:12

answered Sep 30, 2016 at 20:50

Harkirat Saluja

8,1145 gold badges53 silver badges74 bronze badges

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

4 Comments

Wasteland Over a year ago

Thanks and now: Uncaught TypeError: data.map is not a function

Wasteland Over a year ago

Thanks - there's no error now - but it does not render/display anything.

Harkirat Saluja Over a year ago

should work now.. can you paste you entire component as edit in you question?

Wasteland Over a year ago

Let us continue this discussion in chat.

brendangibson · Accepted Answer · 2016-09-30 20:41:48Z

1

React wants to render a component. You are passing a (presumably) JSON object.

If you wanted to see the JSON rendered you could modify your output line to

<p>{JSON.stringify(this.state.sdc)}</p>

answered Sep 30, 2016 at 20:41

brendangibson

2,5514 gold badges26 silver badges43 bronze badges

1 Comment

Wasteland Over a year ago

The stringify method renders empty brackets in browser {}

Winston Ewert · Accepted Answer · 2016-09-30 21:22:52Z

1

You data.js is wrong:

 const sdc = [

You need to have export statement, so this should be:

 export default [

Otherwise, importing sdc will just give you an empty document.

answered Sep 30, 2016 at 21:22

Winston Ewert

45.2k10 gold badges70 silver badges86 bronze badges

1 Comment

Wasteland Over a year ago

Are you saying I should replace const sdc = [ with export default [?

Collectives™ on Stack Overflow

reactjs - load json object

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related