CODEWITHSUNDEEP
javascriptaxios
JamesH Dev
JamesH Dev

Reputation: 13

How to map Axios get response to array

I have tried numerous variations based on other questions on this site but I cannot seem to get my response correctly mapped into my array.

Tried with/without JSON.Parse , tried using responseType: 'json' in headers of GET, tried using response and response.data

function getNotificationsForDevice() {
  var MAC_ADDRESS = document.getElementById("DeviceInput").value;
  var regexp = /^(([A-Fa-f0-9]{2}[:]){5}[A-Fa-f0-9]{2}[,]?)+$/i;

  var DeviceAlertE = document.getElementById("DeviceAlert");
  var notifications = [];

  if (regexp.test(MAC_ADDRESS)) {
    axios
      .get("http://localhost:56005/api/Notifications", {
        //responseType: 'json',
        params: {
          MacAddress: MAC_ADDRESS
        }
      })
      .then(res => {
        const newNotification = {
          id : res.data.ID,
          destination : res.data.Destination,
          MacAddress : res.data.MAC_ADDRESS
        };
        notifications.push(newNotification);      
      })
      .catch(function(error) {
        console.log(error);
      });
    DeviceAlertE.innerHTML = "";
  } else {
    alert("Invalid MAC Address");
  }
  localStorage.setItem("notifications", JSON.stringify(notifications));
  fetchNotifications();
}

notifications array is always empty instead of getting the data retruned from the GET.

EDIT: Get response​ shown below

0: {…} ​​ Destination: "[email protected]" ​​ Id: 1 ​​ MacAddress: "f8:f0:05:ed:1d:28" ​​ SendAlertTypes: "0,1,2,3,4,5,6" ​​ : Object { … } ​ 1: {…} ​​ Destination: "[email protected]" ​​ Id: 6 ​​ MacAddress: "f8:f0:05:ed:1d:28" ​​ SendAlertTypes: "0,1,2,3,4,5,6" ​​ : Object { … } ​ 2: {…} ​​ Destination: "[email protected]" ​​ Id: 14 ​​ MacAddress: "f8:f0:05:ed:1d:28" ​​ SendAlertTypes: "0,1,2,3,4,5,6" ​​ : {…

Upvotes: 1

Views: 1701

Answers (2)

JamesH Dev
JamesH Dev

Reputation: 13

I was trying to map a resonse that was an array into my array. I ended up looping on the response to get the data I needed to populate individual objects and then push to array...

Upvotes: 0

Marcos Luis Delgado
Marcos Luis Delgado

Reputation: 1439

You are saving the notifications array in the localStorage before actually filling that array. You should do something like this:

function getNotificationsForDevice() {
  var MAC_ADDRESS = document.getElementById("DeviceInput").value;
  var regexp = /^(([A-Fa-f0-9]{2}[:]){5}[A-Fa-f0-9]{2}[,]?)+$/i;

  var DeviceAlertE = document.getElementById("DeviceAlert");
  var notifications = [];

  if (regexp.test(MAC_ADDRESS)) {
    axios
      .get("http://localhost:56005/api/Notifications", {
        //responseType: 'json',
        params: {
          MacAddress: MAC_ADDRESS
        }
      })
      .then(res => {
        const newNotification = {
          id : res.data.ID,
          destination : res.data.Destination,
          MacAddress : res.data.MAC_ADDRESS
        };
        notifications.push(newNotification);
        // Moved code here so you have the notifications array with your request's data
        localStorage.setItem("notifications", JSON.stringify(notifications));
        fetchNotifications();
      })
      .catch(function(error) {
        console.log(error);
      });
    DeviceAlertE.innerHTML = "";
  } else {
    alert("Invalid MAC Address");
  }
}

Upvotes: 2

Related Questions