0

I am making a request via Axios to a REST API made in LARAVEL 9, this is my Backend that sends them via JSON to the frontend.

public function index()
{
    try {
        $marcas = DB::table('marca')->where('id', '!=', ':id')->setBindings(['id' =>
         config("constants.ZERO")])->get();
        if(count($marcas) > 0) {
            return response()->json($marcas, 200);
        } else {
            return response()->json($marcas, 204);
        }
    } catch (Exception $ex) {
        return response()->json([
            config("constants.ERR_INTERNAL_SERVER"),
            'details' => $ex->getMessage()
        ], 500);
    }
}

From the frontend I capture the information coming from the Backend in my Axios then() response method:

getmarcas: async function () {
  try {
    this.blocked = true;
    let self = this;
    await this.axios
      .get("marcas")
      .then(function (response) {
        if (response.status == self.APICONST.RESPONSE_STATUS_GET_OK) {
          //self.marcas = Object.values(response.data);
          //self.marcas = Array.from(response.data);
          //self.marcas = JSON.parse(JSON.stringify(response.data));
          self.marcas = response.data;
          console.log(self.marcas);
        }
      })
      .catch((error) => {
        self.notify(
          self.APICONST.ERROR_SEVERITY,
          self.APICONST.TOAST_ERROR_MESSAGE,
          self.APICONST.RESPONSE_ERROR_MESSAGE,
          self.APICONST.TIMELIFE_SHORT
        );
        console.log(error);
      })
      .finally(() => {
        this.blocked = false;
      });
  } catch (error) {
    this.notify(
      this.APICONST.WARN_SEVERITY,
      this.APICONST.TOAST_ALERT_MESSAGE,
      this.APICONST.FRONTEND_EXCEPTION_MESSAGE,
      this.APICONST.TIMELIFE_SHORT
    );
    console.log(error);
  }
},

I have the lines commented out: Object.values(response.data), Array.from(response.data), JSON.parse(JSON.stringify(response.data)).

But the response I get from the console is a Proxy Array that I have not been able to manipulate, it has a structure that I have not been able to store in my Vue components, the information is captured in a label: [[Target]]

enter image description here

user3840170
  • 26,597
  • 4
  • 30
  • 62
  • 1
    https://stackoverflow.com/questions/64917686/vue-array-converted-to-proxy-object - note you probably shouldn't mix `await` and `then` like that for async requests. – Andy Aug 05 '23 at 13:04

0 Answers0