Как вставить индексы и пары ключ / значение в коллекцию MongoDB из формы внешнего интерфейса? - PullRequest
Новая
       8

Как вставить индексы и пары ключ / значение в коллекцию MongoDB из формы внешнего интерфейса?

2 голосов
/ 14 февраля 2020

Я создаю каталог ресторанов и пытаюсь создать форму для удобного ввода информации о ресторане в MongoDB Atlas. Я хочу вставить пары ключ / значение в объект socialMedia и индексы в массив категорий.

Ниже приведен мой код для связанных файлов:

CreateRestaurant. js (страница формы внешнего интерфейса) 

import React from "react";
import useCreateRestaurantForm from "./CustomHooks";

export default function CreateRestaurant() {
  const submitted = () => {
    console.log("Restaurant added!");
  };

  const { inputs, handleInputChange, handleSubmit } = useCreateRestaurantForm(
    submitted
  );

  return (
    <div>
      <h3>Create New Restaurant</h3>
      <form onSubmit={handleSubmit}></form>
      <div>
          <label>Social Media:</label>
          <input
            type="text"
            name="socialMedia"
            onChange={handleInputChange}
            value={inputs.socialMedia}
            required
          />
        </div>
        <div>
          <label>Categories:</label>
          <input
            type="text"
            name="categories"
            onChange={handleInputChange}
            value={inputs.categories}
            required
          />
        </div>
        <button type="submit">Add Restaurant</button>
      </form>
    </div>

CustomHooks . js (внешний интерфейс) 

import { useState } from "react";
import axios from "axios";

export default function useCreateRestaurantForm(callback) {
  const [inputs, setInputs] = useState({});

  const handleSubmit = event => {
    if (event) {
      event.preventDefault();

      axios
        .post("http://localhost:5000/restaurants/add", inputs)
        .then(res => console.log(res.data));

      console.log(inputs);
    }
  };

  const handleInputChange = event => {
    event.persist();
    setInputs(inputs => ({
      ...inputs,
      [event.target.name]: event.target.value
    }));
  };

  return {
    handleSubmit,
    handleInputChange,
    inputs
  };
}

restaurant.model. js (файл внутренней модели) 

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const restaurantSchema = new Schema({
  socialMedia: {},
  categories: []
});

const Restaurant = mongoose.model("Restaurant", restaurantSchema);

module.exports = Restaurant;

ресторанов . js (файл внутреннего маршрута) 

const router = require("express").Router();
let Restaurant = require("../models/restaurant.model");

router.route("/").get((req, res) => {
  Restaurant.find()
    .then(restaurants => res.json(restaurants))
    .catch(err => res.status(400).json("Error: " + err));
});

router.route("/add").post((req, res) => {
  const socialMedia = req.body.socialMedia;
  const categories = req.body.categories;

  const newRestaurant = new Restaurant({
    socialMedia,
    categories
  });

  newRestaurant
    .save()
    .then(() => res.json("Restaurant added!"))
    .catch(err => res.status(400).json("Error: " + err));
});

То, что я хочу, чтобы результат был в базе данных: 

"socialMedia": {
    "facebook": "https://www.facebook.com/restaurantName/",
    "instagram": "https://www.instagram.com/restaurantName/"
  },
"categories": ["organic", "vegetarian", "gluten-free"]

Фактический результат после отправки формы: 

"categories": [
    ""organic", "vegetarian", "gluten-free""
  ],
  "socialMedia": ""facebook": "https://www.facebook.com/restaurantName/",     "instagram": "https://www.instagram.com/restaurantName/""

Кто-нибудь знает, как получить желаемый результат в базе данных без превращения результатов в строку? Кроме того, 3 элемента в массиве категорий становятся одним индексом вместо трех.

...