通过 Reactjs 以 Json 格式发布请求

Question

i have to call a post request from the reactjs(front-end) to spring boot (back-end). i need to know how to call following json request through reactjs.

in spring boot, i have following classes

Product class

@Entity
@Table(name = "PRODUCT",schema = Schema.ASSIGNDB,uniqueConstraints = {
        @UniqueConstraint(name = "productName",columnNames = "PRODUCT_NAME")
})
@Getter
@Setter
public class Product {

    @Id
    @SequenceGenerator(name = "PRODUCT_ID_GEN",sequenceName = Schema.ASSIGNDB+".PRODUCT_ID_SEQ",initialValue = 1003,allocationSize = 1)
    @GeneratedValue(generator = "PRODUCT_ID_GEN",strategy = GenerationType.SEQUENCE)
    @Column(name="PRODUCT_ID")
    private int productId;

    @Column(name = "PRODUCT_NAME",nullable = false)
    private String productName;

    @Column(name = "NUMBER_OF_UNIT",nullable = false)
    private int numberOfUnitInCartoon;

    @Column(name = "PRICE_OF_CARTOON",nullable = false)
    private double priceOfCartoon;



    @Column(name="URL_OF_IMAGE")
    private String urlOfImage;
}

ProductTotal class

@NoArgsConstructor
@AllArgsConstructor
@Getter
@Setter
public class ProductTotal {

    private Product product;
    private int quantity;
}

TotalPrice class

@NoArgsConstructor
@AllArgsConstructor
@Getter
@Setter
public class TotalPrice {

   private List<ProductTotal> productTotal;
   private double totalPrice;

}

PriceController class

@CrossOrigin(origins = "*",maxAge = 3600)
@RestController
@RequestMapping("/price")
public class PriceController {

 @PostMapping(value = "/total",consumes = {MediaType.APPLICATION_JSON_VALUE},produces = {MediaType.APPLICATION_JSON_VALUE})
    private ResponseEntity<TotalPrice> getTotalPrice(@RequestBody TotalPrice totalPrice)
    {
        if(totalPrice.getProductTotal().size()!=0)
            return new ResponseEntity<>(priceService.getTotalPrice(totalPrice),HttpStatus.OK);
        else
            throw new NullPointerException();
    }

}

the json format should be like this

{
"productTotal": [
    {
     "product":{
        "productId": 1001
     },
     "quantity":25
    },
    {
     "product":{
         "productId": 1003
     },
     "quantity":15
    }

]

    }

i have to pass the above format throug reactjs as a post request

fetch('http://localhost:9090/price/total2',{
            method:'POST',
            headers: {'Content-Type':'application/json'},
            body: JSON.stringify({
                productTotal:{
                   // i have no idea how to write this, can anyone help
                }
            })
        }).then(res=>res.json)
        .then(result=>{
            console.log(`your result ${result}`);
        },error=>{
            this.setState({
                isLoaded:true,
                error
            })
        });

Answer 1

Seems to me like the object should be this, unless I'm missing something:

productTotal: [
    {
      product: {
        productId: 1001
      },
      quantity: 25
    },
    {
      product: {
        productId: 1003
      },
      quantity: 15
    }
  ]

Answer 2

You need to send object like this

{ 
 "product_total": [{
     "quantity":10,
     "product": {
         "product_id": 1,
         "product_name": "name",
         "numberOfUnitInCartoon":"..."
         "price_of_cartoon": 1,
         "url_of_image": "..."
     }
 },
 ...
 ],
 "total_price":123
}