javascriptのオブジェクト型のアクセス配列メンバー

Question

Array（data_array）から配列メンバにアクセスしようとしています。変数data_arrayは、以下のコードに似たjsonの一部です。以下のコードは実際のコードではありません。実際のコードは、Reactコンポーネントを作成しようとしているときに再生されます。完全なReactコンポーネントを貼り付けることができますが、不要な情報が含まれています。だから私はいくつかのモックの例を追加すると思った。それが人を欺いた場合の謝罪。現在、私はこのようなシナリオで間違っている可能性のあることについていくつかのヒントを得ることを望んでいましたか？ ：それはそのArray.IはJavaScriptにかなり新しいです言うよう

私には混乱何

data: { 
    "name": "Arjun", 
    "records" : [ 
     { 
     "value": 3 
     }, 
     { 
     "value": 6 
     }, 
     { 
     "value":7 
     } 
    ] 
    } 
    var data_array = data.records 

    console.log(data_array) -> Array[3] 
    console.log(data_array[0]) -> It displays Uncaught TypeError: Cannot read property '0' of undefined 
    console.log(typeof data_array) -> Object. 

は私の第一の出力です。だから多分私は何かを逃しています。どんな助けもありがとう。

編集：これにはまだネスト化された反応コンポーネントがありませんが、この場合は使用できません。私は今

---

var React = require('react'), 
    Router = require('react-router'), 
    mui = require('material-ui'), 
    Foo = require('./foo.jsx'); 


var TempReact = React.createClass({ 
    mixins: [Router.Navigation], 

    getInitialState: function() { 
    return { 
     data: {} 
    }; 
    }, 

    componentDidMount: function() { 
    // Do a web request here to actually get the data from the backend API 
    // this.setState({ 

    // }); 

    // For now, load our fake data 
    this._loadFakeData(); 
    }, 

    render: function() { 
    //console.log(this.state.data) 
    for(var record in this.state.data.records) { 
     console.log(record.Value); 
    } 
    //console.log(this.state.data["records"][0]["Value"]) 
    return (
     <div> 

     <p>^ That will still say , since the header up there is decided by temp-page.jsx, which is 
      based on the route</p> 

     <br/> 
     <p>We've loaded the fake data into our component's state, and here's proof:</p> 
     {this.state.data.name} 
     <br/> 
     <br/> 

     <Foo name={["temp1",this.state.data.records,"green"]}/> 

     </div> 
    ); 
    }, 

    _loadFakeData: function() { 
    this.setState({ 
    data: { 
     "name": "Arjun", 

     "records" : [ 
      { 
      "Value": 6 
      }, 
      { 
      "Value": 7 
      }, 
      { 
      "Value": 8 
      } 
     ] 
     } 
    }); 
    } 

}); 

module.exports = TempReact; 

Answer 1

だから、問題が反応して、私がいたSetState関数（）とされている場合がありますオブジェクトを空の配列に最初にプッシュしてオブジェクトにアクセスできます。

var varArr = new Array(); 
for(key in this.state.data.records) { 
    if(this.state.data.records.hasOwnProperty(key)) { 
     var value = this.state.data.records[key]; 
     varArr.push(value); 
    } 
} 

Answer 2

data_arrayが配列であるため、ネストされたコンポーネントのFooを呼び出しています。配列内のdata.records。あなたは何を見たいですか？

Answer 3

配列はtypeofオブジェクトです。彼らはちょっとしたことが起こっているだけのオブジェクトです。

次の例では動作します：あなたはこのような何かをするとき

var data = { 
"name": "Arjun", 
"records" : [ 
    { 
     "value": 3 
    }, 
    { 
     "value": 6 
    }, 
    { 
     "value":7 
    } 
    ] 
} 
var data_array = data.records 
console.log(data_array[0]) // Object {value: 3} 

このエラーが起こる：

var data = {}; 
var data_array = data.array; // data.array is undefined and subsequently data_array. 
console.log(data_array[0]); // Throws: Uncaught TypeError: Cannot read property '0' of undefined 

Answer 4

あなたがいないなら遠くあなたがjsonDataという変数にこのオブジェクトを格納言うことができます例の場合：

var jsonData = { 
    data: { 
    "name": "Arjun", 
    "records" : [ 
     { 
     "value": 3 
     }, 
     { 
     "value": 6 
     }, 
     { 
     "value":7 
     } 
    ] 
    } 

} 

変数>プロパティ>にアクセスする必要があります。ネストされたプロパティは、そのようにのようなインデックスを指定します -

var data_array = jsonData.data; 
    console.log(data_array.records[0].value) 

は> HERE 3

例をログに記録する必要がありますhttp://codepen.io/theConstructor/pen/wGdpjq