Cloud Stack Ninja

I have a listing page and a separate add record page (MainCreate) in where I want to post a new record to the JSON api hosted on jsonstorage extendclass.com

So this is my MainCreate.vue code (I will also give here one object so you can see the structure)

<template>
    <b-container class="my-4">
        <b-row>
            <b-col>
                <h3>Log a New Dive</h3>
            </b-col>
        </b-row>
        <b-row>
            <b-col>
                <b-form id="myform" @submit="diveData" method="post">
                    <b-form-group id="input-group-1" label="Dive Id:"  label-for="dive_id">
                        <b-form-input type="text" id="input-1" name="dive_id" v-model="dives.dive_id" placeholder="Enter id" ></b-form-input>  
                    </b-form-group>
                    <b-form-group id="input-group-2" label="Dive Number:"  label-for="dive_number">
                        <b-form-input type="text" id="input-2" name="dive_number" v-model="dives.dive_number" placeholder="Enter Dive #" ></b-form-input>  
                    </b-form-group>      
                    <b-button type="submit" variant="primary">Submit</b-button>
                </b-form>
            </b-col>
        </b-row>
    </b-container>
</template>
const postUrl = "https://json.extendsclass.com/bin/d6af4c8c4829"; // request URL
const token = "1234"; // access token
var axiosHeaders = {
  headers: {
    "secret-key": token
  },
};
export default {
  name: "MainCreate",
  data() {
    return {
      dives: {
        dive_id: null,
        dive_number: null
      }
    }
  },
  methods: {
    diveData(e) {
      this.axios.post(postUrl, axiosHeaders, this.dives).then((response) => {
        this.dives = response.data.dives;
        console.warn(response);
      }, () => {
        e.preventDefault();
      }).catch((error) => {
        console.log(error)
      })
      e.preventDefault();
    }
  },
}

I have a listing page that is working just fine and loading all the data. "get" is working fine.

What am I missing? Here is one JSON Object

{
  "dives": [
    {
      "dive_id": 1,
      "dive_number": "0001",
      "dive_date": "05/22/2020",
      "dive_time": {
        "time_value": 55,
        "time_unit": "min"
      },
      "dive_depth": {
        "distance_value": 53,
        "distance_unit": "ft"
      },
      "dive_type": "Reef",
      "dive_note": "Some Long description here about the dive. Some Long description here about the dive Some Long description here about the dive Some Long description here about the dive Some Long description here about the dive",
      "_showDetails": false,
      "dive_location": {
        "country": "USA",
        "dive_site": "Lake Phoenix, Rawlings, Virginia"
      },
      "dive_site_conditions": {
        "visibility": {
          "distance_value": 43,
          "distance_unit": "ft"
        },
        "air_temp": {
          "temp_value": "73°",
          "temp_unit": "F"
        },
        "surface_temp": {
          "temp_value": "73°",
          "temp_unit": "F"
        },
        "bottom_temp": {
          "temp_value": "73°",
          "temp_unit": "F"
        },
        "water_type": "Salt",
        "water_access": "Shore",
        "water_movement": "Surge",
        "water_roughness": ""
      },
      "air_specs": {
        "start_psi": {
          "air_value": "3000",
          "air_unit": "psi"
        },
        "end_psi": {
          "air_value": "500",
          "air_unit": "psi"
        },
        "computer_dive": "Sunto D5",
        "rdp": "No",
        "rebreather": "No"
      },
      "dive_plan": {
        "pressure_g1": "A",
        "s_interval": "21:00",
        "pressure_g2": "G",
        "safety_stop": {
          "time_value": 5,
          "time_unit": "min"
        },
        "residual": {
          "rnt": "xxx",
          "abt": "yyy",
          "tbt": {
            "time_value": 43,
            "time_unit": "min"
          }
        },
        "gas": {
          "air_eanx": {
            "gas_percentage": "32",
            "gas_start_value": " ",
            "gas_start_unit": "",
            "gas_end_value": "",
            "gas_end_unit": ""
          },
          "rebreather_o2": {
            "gas_percentage": "",
            "gas_start_value": " ",
            "gas_start_unit": "",
            "gas_end_value": "",
            "gas_end_unit": ""
          },
          "bailout_eanx": {
            "bailout_gas_percentage": "",
            "gas_start_value": " ",
            "gas_start_unit": "",
            "gas_end_value": "",
            "gas_end_unit": ""
          },
          "scrubber_time": {
            "start_time_value": "123",
            "start_time_unit": "min",
            "used_time_value": "22",
            "used_time_unit": "min",
            "remain_time_value": "22",
            "remain_time_unit": "min"
          }
        },
        "time_in": "09:30 AM",
        "time_out": "calculate",
        "weight": {
          "weight_value": 30,
          "weight_unit": "lb"
        }
      },
      "protection": {
        "suit_type": "Dry",
        "hood": "yes",
        "gloves": "yes",
        "boots": "yes"
      }
    }
]
}

Thanks for your help!



Read more here: https://stackoverflow.com/questions/64419479/axios-post-to-an-api-getting-response-error-401

Content Attribution

This content was originally published by karimlo at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: