Vue.js - Displaying JSON results not working correctly

Question

Before I start this question I am 100% new to vue.js so I may be missing something simple. I've looked through the documentation endlessly and still haven't got a soloution to my problem.

I'm just building a very simple example as practice, where I fill a form and it saves to my DB, but also loads the records I've saved automatically.

This is where it gets strange, when I plug into https://jsonplaceholder.typicode.com/users the JSON data displays correctly in my app.

When I pug into my own backend code, valid JSON is returned but it doesn't display correctly.

This is where I call my Data:

created: function(){
          this.$http.get('https://jsonplaceholder.typicode.com/users') // JSON service that is working
          this.$http.get('http://localhost:8888/vue_testing/users/get/') // My JSON Service that isn't
            .then(function(response){
              console.log(response.data);
              this.users = response.data;
            });
        }

Note I am getting back valid JSON from both services.

My valid JSON: http://take.ms/lIa3u

But displays like this: http://take.ms/6dOEL

jsonplaceholder Valid JSON: http://take.ms/VCwKZ

And displays like this:http://take.ms/Ne3fw

This is my complete component code:

    <template>
    <div class="users">
      <h1>Users</h1>
      <form v-on:submit="add_user">
        <input type="text" v-model="new_user.name" placeholder="Enter name" /><br />
        <input type="text" v-model="new_user.email" placeholder="Enter email" />
        <input type="submit" value="submit">
      </form>
      <ul>
        <li v-for="user in users">
          {{user.name}}: {{user.email}}
        </li>
      </ul>
    </div>
</template>

<script>
    export default{
        name: 'users',
        //Props can accept values from outside the component
        data(){
            return{
              new_user: {},
              users: []
            }
        },
        methods:{
          add_user: function(e){
            //console.log('Add');
            this.$http.post('http://localhost:8888/vue_testing/users/set/', this.new_user)
              .then(response => {
                console.log(response);
              }, error => {
                console.log(error);
            });
            e.preventDefault();
          }
        },
        created: function(){
          //this.$http.get('https://jsonplaceholder.typicode.com/users')
          this.$http.get('http://localhost:8888/vue_testing/users/get/')
            .then(function(response){
              console.log(response.data);
              this.users = response.data;
            });
        }
    }
</script>

<style scoped>
</style>

Again I'm totally new to vue.js, any help in solving this is appricieated. Thanks.

I'm pretty sure you want this.users = response.data['DATA'] — Dan Gamble
– Dan Gamble, Commented Nov 9, 2017 at 14:13
@Dan, this is not displaying anything now. How come the external source jsonplaceholder.typicode.com/users works without the ['Data'] then? Thanks for your time. — Getek99
– Getek99, Commented Nov 9, 2017 at 14:18
In your template you also need to do {{ user[1] }}: {{ user[2] }}. Your data is in an array format, not an object so you can't use string keys to access it, only numbers — Dan Gamble
– Dan Gamble, Commented Nov 9, 2017 at 14:22
This didn't work either. I have a feeling it's something to do with the source as I did pass back the exact same data that I'm getting from the working and it still didn't work. Thanks for your time. I'll dig around some more. — Getek99
– Getek99, Commented Nov 9, 2017 at 14:28

Crackers · Accepted Answer · 2017-11-09 14:26:59Z

1

While jsonplaceholder is sending you an array of objects:

[
    {
        "id": 1,
        "name": "Leanne Grehem",
        ...
    }
]

You are sending from your backend an object which holds first the columns, and second a two dimensional array for the data:

{
    "COLUMNS": ["ID", "NAME", ...],
    "DATA": [
        [1, "Leanne Grehem, ...],
        [2, "John Doe, ...],
    ]
}

I would advise you to change your backend so your response looks like that of the jsonplaceholder. Otherwise you would have to make objects out of arrays. Like below:

    created: function(){
      //this.$http.get('https://jsonplaceholder.typicode.com/users')
      this.$http.get('http://localhost:8888/vue_testing/users/get/')
        .then(function(response){
          console.log(response.data);
          let users = [];
          const responseData = response.data['DATA']; // Get DATA key from your response
          for (user of responseData) { // iterate
              users.push( { id: user[0], name: user[1] } );  // create object out of array
          }
          this.users = users;
        });
    }

Edit: typo

answered Nov 9, 2017 at 14:26

Crackers

1,1257 silver badges14 bronze badges

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

2 Comments

Getek99 Over a year ago

Yes I have tried this already. I mentioned above that I put the exact same json code in the response from my own server and I still get the exact same issue. Thanks for your time and answer

Getek99 Over a year ago

Ok got it working, For some reason there was alot of white space being generated in the back end. Working fine now thanks for your time.

Collectives™ on Stack Overflow

Vue.js - Displaying JSON results not working correctly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related