How to get response and show from backend in vue js

Question

I have the following code:

data: function () {
    return {
      searchResults: []
    }

methods: {

show() {
      return axios({
        method: 'get',
        url: this.url,
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('user-token')}`
        }
      })
          .then (function (response){
            return response.data['searchResults'];
          })
          .catch(e => { console.log(e) })
    },
}

I have an onClick button. When I click the button, the show function executed and it send get response to my spring boot. After that it retrieves some data as I see in console, but the data is not displayed in browser. How can I fix it? The data I get looks like this:

  JSON:
0: Object { "Code": "4326", code_color: 2, "name": "SomeName", … }
1: Object { "Code": "4326", code_color: 2, "name": "SomeName", … }
2: Object { "Code": "4326", code_color: 2, "name": "SomeName", … }

I'm afraid that the data you've provided isn't enough; How does your onclick event use show method? Where do you asign the returned data from server to searchResults in the components data? What's your template structure? — mo3n
– mo3n, Commented Dec 27, 2021 at 5:26
Thats the problem. I am having problem assigning retrieved data — Kozi
– Kozi, Commented Dec 27, 2021 at 5:30
Can you tell us what's the structure of returned data from server? — mo3n
– mo3n, Commented Dec 27, 2021 at 5:38
Array like this { "Code": "4326", code_color: 2, "name": "SomeName", … } — Kozi
– Kozi, Commented Dec 27, 2021 at 5:39

mo3n · Accepted Answer · 2021-12-27 08:10:41Z

1

You should assign the returned data from api call in the show method to searchResults in the components data, so instead of

return response.data['searchResult']

you can use

this.searchResults = response.data.searchResult

edited Dec 27, 2021 at 8:10

answered Dec 27, 2021 at 6:00

mo3n

1,9103 gold badges15 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Just Alex Over a year ago

Great answer. Was gonna say the same. :)

Kozi Over a year ago

Should I then loop through searchResults with for loop to get the data in div?

mo3n Over a year ago

@Kozi Since the data is an object and not an array, there is no need to use v-for (loop) and you can print what ever property that you want directly, like this: '<p>{{ searchResults.name }}</p>'; But if you want to use a v-for loop, you should check the documentation to see how to use it with an object. Although I'm guessing that something isn't right here, since the search results are usually an array of objects and not a single object, so probably you should check your response format again

Kozi Over a year ago

You are right, It is an array of objects

mo3n Over a year ago

@Kozi So please edit your question and update the response format.

Collectives™ on Stack Overflow

How to get response and show from backend in vue js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related