omitting nested parameters when making a put request

I am currently developing a Rails application with Vue on the frontend. I am facing an issue while making a PUT request to the server. I am trying to find a way to not include certain nested parameters like location and numbers in the PUT request. All I want to send are the agency_unique_number and name parameters in the submitAgency request. Can anyone help me solve this problem?

export default {
  data: function () {
    return {
      agency: {
        name: '',
        location: {
          street: ''
          city:''
          province:''
        }
        numbers: {
          office_number: '',
          fax_number: ''
        }
        agency_unique_number: ''
      }
    }
  },
  method: {
    submitAgency() {
      this.$axios.put('/agency.json', { agency: this.agency })
      .then(response => {
      })
    },
  }
}

Answer №1

Extracting the specific data needed for transmission is a simple process.

export default {
  data: function () {
    return {
    agency: {
      name: '',
      location: {
       street: ''
       city:''
       province:''
      }
      numbers: {
       office_number: '',
       fax_number: ''
      }
      agency_unique_number: ''
    }
  }
  method: {
    submitAgency() {
      const { agency_unique_number, name } = this.agency
      const data = { agency_unique_number, name }

      this.$axios.put('/agency.json', { agency: data  })
      .then(response => {
      })
    },
  }
}

Answer №2

Please attempt once more using

export default {
  data: function () {
    return {
      agency: {
        name: '',
        location: {
          street: '',
          city: '',
          province: ''
        },
        numbers: {
          office_number: '',
          fax_number: ''
        },
        agency_unique_number: ''
      }
    },
    methods: {
      submitAgency() {
        const { name, agency_unique_number } = this.agency;
        this.$axios.put('/agency.json', { agency: { name, agency_unique_number } })
          .then(response => {
            // handle response here
          });
      },
    }
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transmitting an Array Using an Ajax Call

Is there anyone knowledgeable in Ajax here? I'm struggling with sending a javascript array in an ajax request. Can someone provide me with an example of how the ajax request should be formatted? My goal is to gather all the javascript data, package it ...

Utilizing cylon.js with Nest Thermostat

Experiencing errors while trying to retrieve thermostat ambient Temperature with cylon.js I have already replaced ACCESS_TOKEN with my unique access token and device id Sample Code: var Cylon = require('cylon'); Cylon.robot({ connections: { ...

Managing the state in NextJS applications

I've scoured the depths of the internet in search of a solution for this issue, but unfortunately I have yet to come across one that effectively resolves it. I've experimented with various state management tools including: useContext Redux Zusta ...

Verify the username in the registration form before clicking the Register button

I have a PHP-based website and I want to implement a user registration form with unique usernames. How can I validate the username before submitting the request to the database for registration? ...

What could be preventing me from successfully calling the JavaScript AJAX function in this particular situation?

Here is my code snippet from a smarty template: <form name="transaction_form" id="transaction_form"> <table class="trnsction_details" width="100%" cellpadding="5" > <tbody> <tr> ...

Conceal an HTML video player on the webpage

Currently, I am utilizing the webcam easy js to capture a picture for our clients. My objective is to conceal the camera from the client's view, as they should not be aware that they are being recorded. I attempted to hide the element using jQuery wit ...

Converting an object to an array with the help of jQuery

I have been working with a json file and created an object using jquery's $.get method. Here is what it looks like when I log it: console.log(array); [Object, Object, Object, Object, Object, Object, Object, Object] 0 : Object country ...

The issue of variable being undefined in JSON for JavaScript and Python

Consider a scenario where you have the following JSON object (remove the semicolon for python): values = { a: 1, b: { c: 2, d: { e: 3 } }, f: 4, g: 5 }; When attempting to print values in JavaScript, it will work pr ...

Is there a way to have the submit button show the uploaded file on the same page, without redirecting to a new

My code seems to be malfunctioning and I suspect it's due to some errors. I'm attempting to have the submit button display an image of a molecule using JSmol. Can anyone lend a hand with this? <script> var Molecule = { width: 550, ...

Connecting the v-model in a Vue.js child component to update the parent value

I've encountered an issue with a vue component where I'm trying to link a text input in the child template to a variable in the parent using v-model, but it doesn't seem to be working. How can I make this work? Currently, I am using Vue.js ...

The resolution of deferred actions is not as successful as foreseen

In my code, I have a method that queries documentdb for a specific document and returns the results to the caller. fetch: function(query) { var fetchDeferred = q.defer(); client.queryDocuments(collectionLink, query).toArray(function(err, docs) { ...

Encountering problems with Nuxt/Vue hydration when utilizing a slotted component

Recently, in my new Nuxt project, I have been facing some peculiar hydration problems. Despite putting effort into isolating the issue and providing a demonstration (refer to the image), the hydration error seems to occur unpredictably. Is there anyone ou ...

The automation script for Playwright/Puppeteer is having trouble properly handling `async...await` in a `for..loop` on the `/signup` page

Currently, I am faced with the challenge of automating rate-limit requests using a playwright automation script. The issue arises when the script keeps attempting to sign up with the email <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data ...

Is it possible to perform ECDH Key Exchange using public keys of varying lengths?

Currently, I am working on implementing an ECDH key-exchange using the P-384 curve. While other curves could be used, I believe the implementations should be fairly similar in nature. The goal is for the Client (Javascript) and Server(Java) to establish a ...

What is the best way to display a checkbox with text inside using Reactjs?

I am using an Ant Design checkbox in my project. This is how my code looks: <Checkbox checked={this.state.D} onChange={(e)=> this.setState({ D: e.target.checked})}>D</Checkbox> <Checkbox checked={this.state.L} onChange={(e)=> this.se ...

The React development server is experiencing issues on the Apple MacBook Pro M1

Currently, I am using an Apple MacBook Pro M1. When attempting to start the react development server with react-scripts start, it hangs and fails to start the server altogether. I also experimented with a new sample app created through create-react-app cl ...

I attempted to utilize body-parser, but it appears that it is not functioning properly

I am having trouble with body parser and express as it is not functioning properly. When I print req.body in the console, it returns an empty object. var express = require('express'); var app = express(); var bodyParser = require('body-pars ...

Vue app running on node server with IIS gives 404 error: page not found

Running a Vue app on a node server and trying to implement a URL redirect using IIS has resulted in a puzzling issue. Everything works perfectly fine when the app is accessed locally with the specified port: https://i.sstatic.net/5bfBu.png However, upon a ...

Aligning text using Javascript and dynamically resizing it with css3 viewport causes a choppy effect when adjusting the size

I'm encountering some issues with keeping my text centered and smoothly resizing when the window size changes. I have a weather website that showcases only the temperature. I present the temperature in various ways. I utilize local storage to store t ...

Is there a way to use JavaScript to convert HTML code into plain text?

I am looking to convert an input from an API in the following format: <p>Communication that doesn&#8217;t take a chance doesn&#8217;t stand a chance.</p> into something like this "Communication that doesn’t take a chance do ...