渲染方法，React Meteor

Question

after following the getting started tutorial on the meteor website i stopped around the item "2.4 Create App component" and begun my app, after installing:

meteor add http

The app purpose is to visualize in different ways the lottery api data of the state of New York. On /server/main.js

import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http';

var apiUrl = 'https://data.ny.gov/api/views/dg63-4siq/rows.json';

Meteor.methods({
  get_data : function() {
    console.log('Getting data');
    var data = Meteor.http.call("GET", apiUrl).data.data.slice(-50);
    console.log(data);
    console.log('Done');
    return data;
  }
})

Meteor.startup(() => {

});

And My App.jsx looks like this

import React, { Component } from 'react';
import { Meteor } from 'meteor/meteor';

// App component - represents the whole app
Meteor.call('get_data', function(err, res){
  if(err){
    console.log('ERROR @ CALL');
  } else {
    // console.table(res);
    console.log('Server responding...');
    console.log(res);
    return res;
  }
});

export default class App extends Component {}

this code returns me on the client console an Object of 50 arrays

(50) [Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11), Array(11)]0: Array(11)1: Array(11)2: Array(11)3: Array(11)4: Array(11)5: Array(11)6: Array(11)7: Array(11)8: Array(11)9: Array(11)10: Array(11)11: Array(11)12: Array(11)13: Array(11)14: Array(11)15: Array(11)16: Array(11)17: Array(11)18: Array(11)19: Array(11)20: Array(11)21: Array(11)22: Array(11)23: Array(11)24: Array(11)25: Array(11)26: Array(11)27: Array(11)28: Array(11)29: Array(11)30: Array(11)31: Array(11)32: Array(11)33: Array(11)34: Array(11)35: Array(11)36: Array(11)37: Array(11)38: Array(11)39: Array(11)40: Array(11)41: Array(11)42: Array(11)43: Array(11)44: Array(11)45: Array(11)46: Array(11)47: Array(11)48: Array(11)49: Array(11)length: 50__proto__: Array(0)

Each object has the same structure.

[ 8070, "FEAB37FD-8776-4056-BF6F-0D3524A42214", 8070, 1495620022, "708543", 1495620022, "708543", null, "2017-05-23T00:00:00", "03 12 25 27 35", null ]

How do i translate the response to the render( ) method for the date and winning number?

Answer 1

Is the code you provide for App.jsx the real code you use? That would mean your class is empty which is pretty weird.

The call should be in the class:

export default class App extends Component {
  renderResults() {
    Meteor.call('get_data', function(err, res){
    if(err){
      console.log('ERROR @ CALL');
    } else {
      return res.map((result, index) => <li key={index}>{`${result[8]} - ${result[9]}`}</li>)
    }
  });
  }

  render() {
    <div>
      <ul>
        {this.renderResults()}
      </ul>
    </div>
  }
}

EDIT:

You can read more about using arrays with React here: https://facebook.github.io/react/docs/lists-and-keys.html

You should definitly do the entire Meteor tutorial and read React documentation before starting your first real project. ;)