Как я могу использовать список коллекций в другой коллекции, используя Spring boot, mongodb и React. js?

Question

Я бегун с reactjs, весенней загрузкой и MongoDB У меня вопрос, это мой первый вопрос на этой платформе. Как я могу использовать список коллекций в другой коллекции, используя Spring boot, mongodb и ax ios ?? Например, у меня есть две коллекции

Студенты:

id

firstName

LastName

градусов []

и

Степени:

id

примечание

студент

В коллекции «Студенты» у меня есть список степеней, как я могу это указать в одном виде таблицы !? Нравится

Имя | Фамилия | Примечание

Использование ax ios

Скриншоты приложения

введите описание изображения здесь

введите изображение описание здесь

Я использую реакцию. js для внешнего интерфейса, баз данных Spring boot Backend и Mongodb.

код:

Модели

Студент

package com.example.models;

import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.DBRef;
import org.springframework.data.mongodb.core.mapping.Document;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

import java.util.ArrayList;
import java.util.Collection;

@Document(collection = "students")
@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class Student {
    @Id
    String id;
    String firstname;
    String lastname;

    @DBRef
    private Collection<Degree> degrees =new ArrayList<>();


}

Степень

package com.example.models;

import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.DBRef;
import org.springframework.data.mongodb.core.mapping.Document;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;


@Document(collection = "degrees")

public class Degree {
    @Id
    String id;
    String note;

    @DBRef
    public Student student;


}

репозиторий

DegreeRepository

package com.example.repositories;

import com.example.models.Degree;
import org.springframework.data.mongodb.repository.MongoRepository;

public interface DegreeRepository extends MongoRepository<Degree, String> {
    @Override
    void delete(Degree deleted);
}

StudentRepository

package com.example.repositories;

import com.example.models.Student;
import org.springframework.data.mongodb.repository.MongoRepository;
public interface StudentRepository extends MongoRepository<Student, String> {
    @Override
    void delete(Student deleted);
}

StudentController

package com.example.controllers;

import com.example.models.Student;
import com.example.repositories.StudentRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import java.util.Optional;

@RestController
public class StudentController {

    @Autowired
    StudentRepository studentRepository;

    @RequestMapping(method=RequestMethod.GET, value="/students")
    public Iterable<Student> student() {
        return studentRepository.findAll();
    }

    @RequestMapping(method=RequestMethod.POST, value="/students")
    public Student save(@RequestBody Student student) {
        studentRepository.save(student);

        return student;
    }

    @RequestMapping(method=RequestMethod.GET, value="/students/{id}")
    public Optional<Student> show(@PathVariable String id) {
        return studentRepository.findById(id);
    }

    @RequestMapping(method=RequestMethod.PUT, value="/students/{id}")
    public Student update(@PathVariable String id, @RequestBody Student student) {
        Optional<Student> optstudent = studentRepository.findById(id);
        Student s = optstudent.get();
        if(student.getFirstname() != null)
            s.setFirstname(student.getFirstname());
        if(student.getLastname() != null)
            s.setLastname(student.getLastname());
        studentRepository.save(s);
        return s;
    }

    @RequestMapping(method=RequestMethod.DELETE, value="/students/{id}")
    public String delete(@PathVariable String id) {
        Optional<Student> optstudent = studentRepository.findById(id);
        Student student = optstudent.get();
        studentRepository.delete(student);

        return "";
    }
}

Компоненты

Создать. js

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

class Create extends Component {

  constructor() {
    super();
    this.state = {
      firstname: '',
      lastname: ''
    };
  }
  onChange = (e) => {
    const state = this.state
    state[e.target.name] = e.target.value;
    this.setState(state);
  }

  onSubmit = (e) => {
    e.preventDefault();

    const { firstname, lastname } = this.state;

    axios.post('/students', { firstname, lastname })
      .then((result) => {
        this.props.history.push("/")
      });
  }

  render() {
    const { firstname, lastname } = this.state;
    return (
      <div class="container">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">
              Add Student
            </h3>
          </div>
          <div class="panel-body">
            <h4><Link to="/"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Students List</Link></h4>
            <form onSubmit={this.onSubmit}>
              <div class="form-group">
                <label for="isbn">First Name:</label>
                <input type="text" class="form-control" name="firstname" value={firstname} onChange={this.onChange} placeholder="First Name" />
              </div>
              <div class="form-group">
                <label for="title">Last Name:</label>
                <input type="text" class="form-control" name="lastname" value={lastname} onChange={this.onChange} placeholder="Last Name" />
              </div>

              <button type="submit" class="btn btn-default">Submit</button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

export default Create;

Приложение js

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

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      students: []
    };
  }

  componentDidMount() {
    axios.get('/students')
      .then(res => {
        this.setState({ students: res.data });
        console.log(this.state.students);
      });
  }

  render() {
    return (
      <div class="container">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">
              Students List
            </h3>
          </div>
          <div class="panel-body">
            <h4><Link to="/create"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add Student</Link></h4>
            <table class="table table-stripe">
              <thead>
                <tr>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Note</th>
                </tr>
              </thead>
              <tbody>
                {this.state.students.map(c =>
                  <tr>
                    <td><Link to={`/show/${c.id}`}>{c.firstname}</Link></td>
                    <td>{c.lastname}</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

индекс. js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import App from './App';
import './App.css';
import Create from './components/Create';


ReactDOM.render(
  <Router>
      <div>
        <Route exact path='/' component={App} />
        <Route path='/create' component={Create} />
      </div>
  </Router>,
  document.getElementById('root')
);

Answer 1

Я не работал над React, поэтому не уверен в синтаксисе. Но вы можете попробовать следующий код.

{this.state.students.map(c =>
                  <tr>
                    <td><Link to={`/show/${c.id}`}>{c.firstname}</Link></td>
                    <td>{c.lastname}</td>
                    <td>{c.map(d => <p>{d.note}</p>)</td>
                  </tr>
                )}