pagekit / vue-resource

The HTTP client for Vue.js
MIT License
10.09k stars 1.6k forks source link

Trouble iterating over Vue Resource JSON data #707

Closed sts-ryan-holton closed 6 years ago

sts-ryan-holton commented 6 years ago

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:

51|165x87

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'] }}