Получение данных из MongoDb с помощью React - PullRequest
Новая
       3

Получение данных из MongoDb с помощью React

0 голосов
/ 19 июня 2020

Я следил за этим онлайн-руководством и могу получать данные из моей базы данных. Но только данные из схемы, которые не являются частью объекта. Я спрашиваю, как я могу также получать данные от объектов. 

const mongoose = require('mongoose');
const {Schema} = mongoose;


const locationSchema = new Schema({
    Name: String,
    Address:{
        Street: {type: String},
        City: {type: String},
        Zipcode: {type: Number},
        State: {type: String},
},
    ContactInfo:{
        Email:{type:String},
        Phone:{type:Number},
    },
    Website: String,
    Hours:{
        DaysOpen: {type:[String]},
        OpeningTimes: {type:[Number]},
        ClosingTimes: {type:[Number]},
        },
    geometry: {
    type: {type: String, default:"Point"},
    coordinates: {type:[Number], index: "2dsphere"}
    },
    Services: String,
    Languages: String,
    Documentation: Boolean,
    OtherNotes: String,
})

mongoose.model('Locations', locationSchema);
Это моя модель 

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

const Location = props => (
  <tr>
    <td>{props.location.Name}</td>
    <td>{props.location.Website}</td>
    <td>{props.location.Services}</td>
    <td>{props.location.Languages}</td>
  </tr>
)

export default class LocationsList extends Component {
  constructor(props) {
    super(props);

    this.deleteLocation = this.deleteLocation.bind(this)

    this.state = {locations: []};
  }

  componentDidMount() {
    axios.get('http://localhost:3000/api/location')
      .then(response => {
        this.setState({ locations: response.data })
      })
      .catch((error) => {
        console.log(error);
      })
  }

  deleteLocation(id) {
    axios.delete('http://localhost:3000/api/location/'+id)
      .then(response => { console.log(response.data)});

    this.setState({
      locations: this.state.locations.filter(el => el._id !== id)
    })
  }

  locationList() {
    return this.state.locations.map(currentlocation => {
      return <Location location={currentlocation} deleteExercise={this.deleteLocation} key={currentlocation._id}/>;
    })
  }

  render() {
    return (
      <div>
        <h3>Logged Locations</h3>
        <table className="table">
          <thead className="thead-light">
            <tr>
              <th>Name</th>
              <th>Website</th>
              <th>Services</th>
              <th>Languages</th>
            </tr>
          </thead>
          <tbody>
            { this.locationList() }
          </tbody>
        </table>
      </div>
    )
  }
}

Так я до сих пор получаю данные. Как я могу получить контактную информацию, часы, адрес и геометрию.

Я бы погуглил и поискал другие решения, но не знаю, как бы это называть.

1 Ответ

0 голосов
/ 19 июня 2020

Самое лучшее в mon goose - это то, что он ведет себя как обычный javascript объект. Итак, чтобы получить другие свойства, вы должны просто использовать их так же, как вы получили имя и веб-сайт. но теперь он вложен так, как Street, это будет примерно так: props.location.Address.Street

Моя единственная вещь, может быть, потому что я просто не форматирую свою схему таким образом, это то, что я определил бы каждое свойство в схеме (например, имя, адрес и т. д. c.) с использованием объекта и внутри этого объекта допустимый тип Mon goose, например: 

Name:{
  type:String
}
...

Но если он работает так, вам больше возможностей!

...