dict object to form data for patch operation in VueJS

Question

I am making patch call to REST API, it work fine when I call this from curl or Postman

[
    {
        "user": {
            "pk": 2,
            "username": "rayees",
            "email": "rayees.xxxx@xxxx.co.in",
            "first_name": "Rayees",
            "last_name": "xxxxx",
            "contact_number": "1111"
            },
        "event_cost": "cost",
        "schedule": [
            {
                "day_available": "MON",
                "time_available": "Morning"
            }
        ],
        "cities": [
            {
                "uid": 1,
                "city": "SANTA CLARA"
            }
        ]
    }
]

But it fails from VueJS application in FORM data, example

methods: {
    updateDetails() {
      var formData = new FormData();

      formData.set("first_name", this.userDetails.first_name);
      formData.set("last_name", this.userDetails.last_name);
      formData.set("contact_number", this.$refs.contact_input.value);
      formData.set("email", this.$refs.email_input.value);
      formData.set("event_cost", this.$refs.event_cost.value);
      var schedule = [
        {
            "day_available": "TUE",
            "time_available": "Morning"
        }
       ]
      console.log(JSON.stringify(schedule))
      formData.set("event_date", JSON.stringify(schedule))

Data not getting updated from form data with REST API call with Patch method, any suggestion ?

Here the issue with value of

schedule

Looks like, stringfy not formatting the data properly

JSON.stringify(schedule)

Backend API expect

  editDetails(data, token_key, username) {
    return apiClient.patch(`/user/${username}/details`, data, {
      headers: {
        Authorization: `Token ${token_key}`,
        "Content-Type": "multipart/form-data"
      }
    });

Log from my views.py - while sending form data (VueJS)

2020-01-16 19:28:59,248 apis.views   INFO     ProfileDetails(data=<QueryDict: {'first_name': ['Rayees'], 'last_name': ['xxxx'], 'contact_number': ['1111'], 'email': ['rayees.xxxx@xxx.co.in'], 'event_cost': ['32.00'], 'bio': ['Test BIO333'], 'schedule': ['[{"day_available":"TUE","time_available":"Morning"}]']}>, instance=<Chef: rayees>):

Log from my views.py - while sending json data (postman)

2020-01-16 19:31:49,250 apis.views   INFO     ProfileDetails(data={'user': {'pk': 2, 'username': 'rayees', 'email': 'rayees.xxx@xxx.co.in', 'first_name': 'Rayees', 'last_name': 'xxx', 'contact_number': '322222', 'user_type': 'Chef', 'photo': None, 'address': 'TEsting'}, 'first_name': 'Rayees', 'last_name': 'xxxxx', 'contact_number': '11111', 'email': 'rayees.xxxx@xxx.co.in', 'photo': None, 'bio': 'Test BIO333', 'event_cost': '32.00', 'schedule': [{'day_available': 'TUE', 'time_available': 'Morning'}], 'dish_set': [], 'cities': [{'uid': 1, 'city': 'SANTA CLARA'}]}, instance=<Chef: rayees>):     

Here is the patch method with parameter from backend

def patch(self, request, *args, **kwargs):
            user = User.objects.get(user__username=kwargs['username'])
            serializers = ProfileDetails(data=request.data, instance=user)
            self.logger.info(serializers)
            if serializers.is_valid():
                serializers.save()
                self.logger.info("Serializer save response")
                self.logger.info(serializers.data)
                return Response(serializers.data, status=status.HTTP_201_CREATED)
            return Response(serializers.errors, status=status.HTTP_400_BAD_REQUEST)

Answer 1

It seems you are passing a string containing JSON to your server, instead of JSON data directly.

Probably you don't need to create a FormData dict. Can you not call editDetails directly with a data object instead of a dict?

Also, the data you are passing with postman is not formatted the same way. You may try the following:

const data = {
    user: {
        first_name: this.userDetails.first_name,
        last_name: this.userDetails.last_name,
        contact_number: this.$refs.contact_input.value,
        email: this.$refs.email_input.value
    },
    event_cost: this.$refs.event_cost.value,
    schedule: [
        {
            day_available: "TUE",
            time_available: "Morning"
        }
    ]
};

// call editDetails with this data object