vue環境でJsonデータを取り込みindex番号を指定の配列にPushするには

宜しくお願い致します。

Vue環境化で$.ajax()でJsonデータ（連想配列）を取り込みました。その際、各配列の並び順番どうりに番号を割り振っていきたいと思っています。.push()を使いindex1という名前の配列に並び順通りの番号を振っていきたいと考えてますが、vue環境下でどのように処理をしたら良いかわかりません。

尚、indexで配列の番号が取得できることは把握してますが、配列をフィルターなどで絞り込んだ際、絞り込み後の配列のindex番号が元の番号と変わってしまう為、上記の対応をしようと考えました。

$.ajax()でJsonデータ（連想配列）を取り込み

 created: function () {

      $.ajax({
          url : 'data.json',
          type : 'GET',
          dataType : 'json'
      })
      .done(function(data, textStatus, jqXHR) {
        this.products = data;

      }.bind(this))
      .fail(function(jqXHR, textStatus, errorThrown) {
        this.isError = true;
        this.message = '商品リストの読み込みに失敗しました。';
      }.bind(this));
    },

.push()を使いindex1に値を入れていく処理のイメージ

for (var i = 0; i <= this.products.length-1; i++) {
this.products.push(
{
'index1': i
}
);

知りたいこと
・vue上記のような処理を場合、どういった書き方になるのか（created内に追記で記載するのかなど）
・そもそも上記の記載も正しい書き方かわかりません
・自分が考えているやり方よりいい方法があれば知りたいです

yuki84web

2019/12/20 02:48

JSONの形式（実際に取得しているもの）についても書いた方が良いと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

回答が付かないようなので・・・
コンポーネントのdata{}にあらかじめ代入用のプロパティ(下記の例ではedited)を用意しておき、
JSONを受け取ったら、その関数内でidを追加し、editeに代入しています。
リストレンダリングをしたい状況なのでは？という推測から、テーブルに表示をさせてみました。

CODEPENでご確認ください。
https://codepen.io/satoshi_tajima/pen/ZEYerzM

html
1<div id="app">
2  <table>
3    <thead>
4      <tr>
5        <th>id</th>
6        <th>age</th>
7        <th>first name</th>
8        <th>last name</th>
9      </tr>
10    </thead>
11    <tbody>
12      <tr v-for="(item,index) in edited" :key="index">
13        <td>{{item.id}}</td>
14        <td>{{item.age}}</td>
15        <td>{{item.firstname}}</td>
16        <td>{{item.lastname}}</td>
17      </tr>
18    </tbody>
19  </table>
20</div>

javascript
1new Vue({
2  el: '#app',
3  data: {
4    edited: []
5  },
6  created: function () {
7    //下記の***ココ***でthisを指定するとjQueryオブジェクトが入ってしまうので、
8    //このタイミングでme変数にvueオブジェクトを代入しています
9    let me = this;
10    
11    $.ajax({
12      url: "https://next.json-generator.com/api/json/get/NkubeCYTP"
13    }).then(function (data) {
14      //dataは、[{
15      //  age: Number,
16      //  firstname: String,
17      //  lastname: String
18      //}]
19      //のデータ構成になっています。
20
21      //受信したJSONを全て舐めて、vueのプロパティに戻す
22      me.edited = data.map(function (item, index) {
23        //***ココ***
24        item.id = index;　//idを追加して・・・
25        return item;　//オブジェクト全体を返す
26      });
27    });
28  }
29});