Trouble getting data out of API using Vue JS

Question

I'm having trouble iterating over data from a json file in Vue JS. I've got everything set up and have access to the json. What am I missing here:

JSON

{
  "test": "example",
  "data": [
    {
      "name": "My Name",
      "address": "My Address"
    }
  ]
}

Vue JS html

{{ someData['name'] }}

<ul>
  <li v-for="item in someData" v-bind:key="item.id">
    {{ item }}
  </li>
</ul>

and my script:

created() {
    this.$http.get('http://localhost:3000/properties.json').then(response => {
      // get body data
      this.someData = response.body
    }, response => {
      // error callback
    });
  }

The result I'm getting is:

Result

As you can see, in my v-for simply specifying item grabs each of the items here, but I want to be able to do something like {{ item['name'] }} and {{ item['address'] }}

Hi, someData is just for testing purposes. I've just updated my question above with some new JSON data as I'm having trouble with that part — Ryan H
– Ryan H, Commented Sep 20, 2018 at 11:04

F.bernal · Accepted Answer · 2018-09-20 10:51:25Z

2

The main problem is in your JSON file. VueJS v-for is iterating over the keys in your JSON file, in this case {{ item }} will be getting name and address. That is the reason of your output.

To solve this...

Format your JSON file as

[{name: 'John', address: 'Jane'}]

Doing this your VueJS v-for will be iterating over JSON array and {{ item }} will get the value { name: 'John', address: 'Jane' } and now you can do {{ item.name }} {{ item.address }}

An example here

EDIT: Update your API request code

created() {
    this.$http.get('http://localhost:3000/properties.json').then(response => {
      // get body data
      this.someData = [response.body]
    }, response => {
      // error callback
    });
  }

edited Sep 20, 2018 at 10:51

answered Sep 20, 2018 at 10:34

F.bernal

2,7022 gold badges24 silver badges28 bronze badges

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

4 Comments

Ryan H Over a year ago

Thanks, but my json is going to be coming from an API, or a json file, how would I adapt this?

Ryan H Over a year ago

Awesome! Thank you so much. it's just occurred to me that my data is going to contain multiples like this: ``` { "test": "example", "data": [ { "name": "My Name", "address": "My Address" } ] } ``` So now, I tried doing: {{ item.data.name }} and that didn't work?

Ryan H Over a year ago

any suggestions?

F.bernal Over a year ago

with that JSON modification you must update your created() method to fit what you want. In this case, without viewing the code, I think you will add this. this.someData = response.body.data.

Ayush Gupta · Accepted Answer · 2018-09-20 10:34:00Z

0

You can simply do the following:

<template v-for="(item, key) in someData">
  <span v-if="key == 'address'">{{item}}</span>
</template>

answered Sep 20, 2018 at 10:34

Ayush Gupta

1146 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 00:50:02Z

0

The crucial point is that the v-for="item in someData" part in the component's view iterates over values of the someData object, namely "John" and "Jane".

Depending on what exactly is your goal, you should either reformat the JSON to be an array of objects (as suggested by @F.bernal), or change the logic of v-for directive.

edited Jul 16, 2022 at 0:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 20, 2018 at 10:38

Parzh

10.2k4 gold badges48 silver badges82 bronze badges

Collectives™ on Stack Overflow

Trouble getting data out of API using Vue JS

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related