Vue.js - JSON結果が正しく表示されない

Question

私がこの質問を開始する前に、私はvue.jsを100％新しくしているので、何か簡単なものが見つからない可能性があります。私は無限にドキュメントを見てきましたが、まだ私の問題を解決していません。

私はフォームを記入して私のDBに保存するだけでなく、私が自動的に保存したレコードを読み込む練習として非常に簡単な例を構築しています。

これは私がhttps://jsonplaceholder.typicode.com/usersにプラグインすると、私のアプリでJSONデータが正しく表示されるのが奇妙なところです。

私自身のバックエンドコードに挿入すると、有効なJSONが返されますが、正しく表示されません。私は両方のサービスから戻って有効なJSONを取得しています

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; 
      }); 
     } 

注：

は、これは私が私のデータを呼び出すところです。

マイ有効なJSON：http://take.ms/lIa3u

しかし、このような表示されます。http://take.ms/6dOEL

jsonplaceholder有効なJSON：http://take.ms/VCwKZ

そして、このように表示されます。

： http://take.ms/Ne3fw

これは私の完全なコンポーネントのコードです

<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> 

もう一度私はvue.jsを完全に新しくしています。これを解決するための助けがあります。ありがとう。

Answer 1

jsonplaceholderは、あなたのオブジェクトの配列を送信している間：

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

あなたのバックエンドからの最初の列を保持するオブジェクト、およびデータのための第二の二次元配列送信されます。

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

を

あなたの応答がjsonplaceholderのように見えるように、バックエンドを変更するようお勧めします。そうしないと、オブジェクトを配列から除外しなければなりません。以下のように：

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; 
     }); 
    } 

編集：私はあなたが `this.users = response.dataたいかなり確信しているタイプミス