Post ID to DRF API but call name

ckcAdmin 0
Viewed 31

I am really struggling with this one as I am learning. I am trying to call the following:

 {
        "id": 2,
        "interest_name": "Money"
    },
    {
        "id": 3,
        "interest_name": "Django"
    },
    {
        "id": 4,
        "interest_name": "Test"
    },
    {
        "id": 5,
        "interest_name": "Inventory Management"
    },
    {
        "id": 6,
        "interest_name": "Design"
    }

With:

created () {
      getAPI.get('api/v1/projects/category')
      .then(response => {
        this.ProjectsAPI = response.data
        console.log('API Data Received')
      })
      .catch(errors => {
        console.log(errors)
      })

I am displaying a select field as so:

<select id="interest_category" name="interest_category" v-model="interest_category" multiple class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm">
   <option v-for="category in ProjectsAPI">{{ category.interest_name }}</option>
</select>

I get the following within my rendered Vue page:

Money
Django
Test
Inventory Management
Design

Now, I am trying to select the option but I get this error when I hit submit:

[{"non_field_errors":["Invalid data. Expected a dictionary, but got str."]}]}

Here is my form code:

submitForm(e) {
            const formData = {
                project_title: this.project_title,
                project_description: this.project_description,
                interest_category: this.interest_category,
                created_by: this.created_by
            }

            axios 
                .post("api/v1/projects/", formData)
                .then (response => {
                    console.log(response)

                    this.$router.push('/project-dashboard')
                })
                .catch(error => {
                    if (error.response) {
                        for (const property in error.response.data) {
                            this.errors.push(`${property}: ${error.response.data[property]}`)
                        }

                        console.log(JSON.stringify(error.response.data))
                    } else if (error.message) {
                        console.log(JSON.stringify(error.message))
                    } else {
                        console.log(JSON.stringify(error))
                    }
                })
        }
    }

I am struggling to get the ID from the first API call and pass that instead of the name of the item. When I inspect, this is what I see:

[
    "Money",
    "Django",
    "Test",
    "Inventory Management",
    "Design",
]

How can I convert those to IDs that I get from the first API call to send the ID instead of a of the str of interest_category

UPDATE

I was able to get the value done correctly so now it is passing the correct ID as seen in the comments. Now, I am getting this error.

Invalid data. Expected a dictionary, but got int.
axios django-rest-framework django vue.js javascript
1 Answers

assuming that Django is expecting the category dictionary for some reason in the API then the submitForm method should look like this:

submitForm(e) {
  const category = this.ProjectAPI.find(({ id }) => id == this.interest_category)
  const formData = {
    project_title: this.project_title,
    project_description: this.project_description,
    interest_category: category, // here
    created_by: this.created_by
  }

Please also share the Django view for this endpoint so we can fix your problem

Your snippet looks fine if it's just for learning purpose but if you developing a production app I'd recommend you to make some changes to improve the quality of code to make it more manageable in the long run.

dsfx3d0
Related