JSON post input values as an object

Question

I can't POST data from input fields as a object. I tried e.g. JSON.stringify({FactoryId: FactoryId.value}) but it doesnt work. If I input data in JSON.stringify({FatctoryId: '12345'}) it create object in database but with id=12345. I would like get value from input field and post them like an object. Could you help me?

class Create extends Component {        

      constructor() {
        super();
        this.state = {
          ProductId: '',
          FactoryId: '',
          Name: '',
          Description: '',
          Category: '',
          Availability: ''
        };
      }

      onChange = (e) => {
        const state = this.state
        state[e.target.name] = e.target.value ;
        this.setState(state);
      }




      post = () => {
          fetch('/api/Products',
              {
                  method: 'post',
                  headers: {
                      'Accept': 'application/json',
                      'Content-Type': 'application/json'
                  },
                  body: JSON.stringify()        
              });
      };        

      render() {
        const { ProductId, FactoryId, Name, Description, Category, Availability } = this.state;
        return (
          <div class="container">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title">
                  ADD PRODUCT
                </h3>
              </div>
              <div class="panel-body">
                <h4><Link to="/fetch"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Products List</Link></h4>
                        <form onSubmit={this.post} name="form">
                  <div class="form-group">
                  <label for="isbn">FactoryId:</label>
                  <input type="text" class="form-control" name="FactoryId" value={FactoryId} onChange={this.onChange} placeholder="FactoryId" required/>
                  </div>                 
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>
              </div>
            </div>
          </div>
        );
      }
    }

Product.cs

using System;
using MongoDB.Bson.Serialization.Attributes;

namespace Shop.Models
{
    public class Product
    {
        [BsonId]
        public Guid ProductId { get; set; }
        [BsonRequired]
        public string FactoryId { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string Category { get; set; }
        public int Availability { get; set; } = 0;
    }
}

ProductsController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Shop.IRepository;
using Shop.Models;


namespace Shop.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ProductsController : ControllerBase
    {
        private readonly IProductRepository _productRepository;


        public ProductsController(IProductRepository productRepository)
        {
            _productRepository = productRepository;
        }

        [HttpGet]
        public Task<string> Get()
        {
            return this.GetProduct();
        }

        public async Task<string> GetProduct()
        {
            var products = await _productRepository.Get();
            return Newtonsoft.Json.JsonConvert.SerializeObject(products);
        }

        [HttpGet("{id}")]
        public Task<string> Get(Guid id)
        {
            return this.GetProductById(id);
        }

        public async Task<string> GetProductById(Guid id)
        {
            var product = await _productRepository.Get(id) ?? new  Product();
            return Newtonsoft.Json.JsonConvert.SerializeObject(product);
        }


        [HttpPost]
        public async Task<string> Post([FromBody] Product product)
        {
            await _productRepository.Add(product);
            return "";
        }

        [HttpPut("{id}")]
        public async Task<string> Put(Guid id,[FromBody] Product product)
        {
            if (string.IsNullOrEmpty(id.ToString())) return "Invalid id!";
            return await _productRepository.Update(id, product);

        }

        [HttpDelete("Delete/{id}")]
        public async Task<string> Delete(Guid id)
        {
            if (string.IsNullOrEmpty(id.ToString())) return "Invalid id!";
            await _productRepository.Remove(id);
            return "";
        }

        [HttpDelete]
        public async Task<string> Delete()
        {
            await _productRepository.RemoveAll();
            return "";
        }


    }
}

Okay, I was wondering about the "FromBody", but it's not missing. Anyway, is it normal that you have nothing a parameter at this line : "body: JSON.stringify()" ? Should it not be "body: JSON.stringify(this.state)" ? — Phteven
– Phteven, Commented Feb 15, 2019 at 16:35

Hien Nguyen · Accepted Answer · 2019-02-16 03:29:34Z

0

You did not input parameter for JSON.stringify() method. You try like this

(async () => {
  const rawResponse = await fetch('/api/Products', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(this.state)  
  });
  const content = await rawResponse.json();

  console.log(content); //log content
})();

answered Feb 16, 2019 at 3:29

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JSON post input values as an object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related