Posting Form data as json to nested serializer from ReactJS

Question

I am getting this error {"user":["This field is required."]} in reactjs when posting data to an endpoint which has the following serializer

class ProfileSerializer(serializers.ModelSerializer):
    user = UserProfileSerializer()

    class Meta:
        model = models.Profile
        fields = ['user',
                  'address',
                  'city',
                  'country',
                  'user_type',
                  'telephone_Number',
                  'organisation_name',
                  ]

    def create(self, validated_data):
        print(validated_data)
        user_data = validated_data.pop('user')
        user = UserProfile.objects.create(**user_data)
        profile = Profile.objects.create(user=user, **validated_data)
        return profile

On the network tab of the browser i can see all the data is captured as shown

user: [{"name":"Testing user"},{"email":"[email protected]"},{"password":"*****"},{"is_active":true}]
user_type: 2
organisation_name: Testing company
address: N/A
city: N/A
country: Test
telephone_Number: 8888763

This is how i am posting the data from reactjs

 let data = this.state.data;
      let user = [
        { name: data.name },
        { email: data.email },
        { password: data.password },
        { is_active: data.is_active },
      ];
      let form_data = new FormData();
      form_data.append("user", JSON.stringify(user));
      form_data.append("user_type", data.user_type.value);
      form_data.append("organisation_name", data.organisation_name);
      form_data.append("address", data.address);
      form_data.append("city", data.city);
      form_data.append("country", data.country);
      form_data.append("telephone_Number", data.telephone_Number);
      await saveUser(form_data);

Edits Upon further checks i am noticing the issue is on this await saveUser(form_data); The data object on the http post requst is empty as shown data: FormData {} So the issue seems to be how to convert form data to json object. How do i convert this? Please help what could be wrong with this? Kindly assist

Muteshi · Accepted Answer · 2020-06-07 17:01:10Z

1

FormData was really causing me lots of problem My problem was the format i was using to post data to the server. I created javascript objects from my state objects and i was able to successfully post data to the server as shown below. I had to give an answer so that if in future someone encounters same issue, s/he doesn't suffer like i did. lol

let data = this.state.data;
      let user = {
        name: data.name,
        email: data.email,
        password: data.password,
        is_active: data.is_active,
      };
      const userData = {
        user,
        organisation_name: data.organisation_name,
        name: data.name,
        address: data.address,
        city: data.city,
        country: data.country,
        telephone_number: data.telephone_Number,
        user_type: data.user_type.value,
      };
      await saveUser(userData);

answered Jun 7, 2020 at 17:01

Muteshi

1,4181 gold badge16 silver badges33 bronze badges

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

2 Comments

cgitosh Over a year ago

Asante Muteshi.. Been dealing with this problem for a minute now.. followed your answer and I'm getting "data is not defined". The error is occuring at "..... name: data.name". Any ideas?

cgitosh Over a year ago

Update: I changed this let data = this.state.data; to let data = this.state;.. Working like a charm.. thanks a lot, solved a major headache

Collectives™ on Stack Overflow

Posting Form data as json to nested serializer from ReactJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related