stackoom
  简体   繁体   中英

JS - what kind of object is it and how can I access it

 原文  2016-09-30 22:46:51  4   1    javascript/ reactjs

Question

I'm playing with reactjs and have problems processing an object. The object is as follows: 

export default [
  {
    "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 was shown how to print the values: 

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

Now I'm trying to play with it, eg: 

_extractData() {
    const data = this.state.sdc
    return Object.keys(data[0])

  }

Will print the four headers (Type, Price, Amount, Total) but I really want to do some more complicated things. eg.

  • Display all transactions of a type: Buy
  • Display all transactions with total value greater than x, etc.

How would I access all those. Can you provide an example, please?

EDIT: I've added one method suggested below - however it does not display anything: 

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){
         const datum = data[key]
         return ( <div key={datum.id}>
          <p>Type: {datum.Type}</p>
          <p>Price: {datum.Price}</p>
          <p>Amount: {datum.Amount}</p>
          <p>Total: {datum.Total}</p>
        </div> )
     })
  }


  _extractData() {
    const data = this.state.sdc
    return Object.keys(data[0])

  }

  _renderBuy() {
    const data = this.state.sdc
    data.filter(function(element) {
      return element.hasOwnProperty("Type") && element.Type == 'Buy';
  });

  }

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


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

    );
  }
}

1 answers

solution1
 3 ACCPTED  2016-09-30 23:14:40

I think this is more like a general javascript question. What you are asking for is to filter the list of objects from your array, and so a way to achieve that is by using the array's filter method. 

// Filter all the transactions of type 'Buy'
data.filter(function(element) { 
  return element.hasOwnProperty("Type") && element.Type == 'Buy'; 
});

// Filter all the transactions having a total amount greater than or equal to 0.84
data.filter(function(element) { 
  return element.hasOwnProperty("Total") && element.Total >= 0.84; 
});

The output you get from the filter is just a new array of objects with the elements that pass the test, so in order to render them in React you would need to traverse this new returned array, just like you did in your _renderData() instance method.

I've made some slight changes to your _renderData method so that it accepts an argument, which would be any array of objects so you don't have to repeat the same code again to render the "Buy" transactions, or any other filtered array. 

_renderData(data){
   return Object.keys(data).map(function(key,index){
       const datum = data[key]
       return ( <div key={datum.id}>
        <p>Type: {datum.Type}</p>
        <p>Price: {datum.Price}</p>
        <p>Amount: {datum.Amount}</p>
        <p>Total: {datum.Total}</p>
      </div> )
   })
}

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

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

  );
};

jsBin

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I access object within the object React JS What kind of JS object is [ foo: 'bar'] How can I access a JS object I have defined? What kind of object is this in Java script? and how to add this kind of elements in to this object? how can i disable access a property of a object ? JS How can I access collections in an object generated by xml2js What kind of object am I creating here? I can set a property to a JS array so what kind of data type is the original array now? How do I convert a JSON serialized object into a JS object, so I can access its properties? What kind of JS module is this
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM