[Vuejs]-Having trouble sending array as API response from Express to Front End. Any suggestions?

0👍

First thing you can do on the server side is using res.json() insted of res.send() for json response

EDIT : Here a link to the documentation
https://expressjs.com/fr/api.html#res.json

0👍

first can you tell what each of these "console.log"s outputed so we could debug it ?
I put your API in my own express server and i got this response which is fine

0   "{'field' : 'a'}"
1   "{'field' : 'b'}"
2   "{'field' : 'c'}"

and fetched it in my Vue app and got this response:

    config: Object { url: "http://localhost:3000/test", method: "get", timeout: 0, … }
​
data: (3) […]
​​
0: "{'field' : 'a'}"
​​
1: "{'field' : 'b'}"
​​
2: "{'field' : 'c'}"
​​
length: 3
​​
<prototype>: Array []
​
headers: Object { "content-type": "application/json; charset=utf-8" }
​
request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }
​
status: 200
​
statusText: "OK"

so from what i see everything is ok in your code; I don’t think you need to change anything in your code. it might be something with your configuration, which again if you tell us what your apps log we might find out the problem.

0👍

Have you try to change your method on frontend like this?

methods : {
    getTest: async () => {
      // use promise instead
      await axios.get('http://localhost:3000/test',[]).then((resp) => {
        let testData = resp.data
        console.log(testData)
      }).catch((err) => {
        console.log('oopss..')
      })
    }
  }

Leave a comment