JSONオブジェクト内の値を追加することができませんdynamicaally

Question

私は

var books = [{ 
       "no" : 1, 
       "bookType":"fiction", 
       "bookPrice": 60 

      },{ 
       "no" : 2, 
       "bookType":"fun", 
       "bookPrice": 40 

      } 
      .... 
    ] 

ようになりJSONオブジェクトにオブジェクトを追加しようとしていますが、アウトプットはとても違います！これを修正する方法を教えていただけますか？

$(document).ready(function() { 
 
     var books = []; 
 
      $('.addItem').on('click', function() { 
 
      var type = $(this).data('type'); 
 
      var price = $(this).data('price'); 
 
      books.push('{',type, '"',price,'"}'), 
 
      console.log(books); 
 
      }); 
 

 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="addItem" data-type="fiction" data-price="50">Add Book</button> 
 
<button class="addItem" data-type="fun" data-price="40">Add Book</button>

Answer 1

あなたの代わりに、オブジェクトの文字列が挿入されているからです。配列に挿入するためにオブジェクトを文字列にする必要はありません。配列はオブジェクトを保持できます。

$(document).ready(function() { 
 
     var books = []; 
 
      $('.addItem').on('click', function() { 
 
      var type = $(this).data('type'); 
 
      var price = $(this).data('price'); 
 
      books.push({ 
 
       "no":books.length, 
 
       "bookType":type, 
 
       "bookPrice":price 
 
      }); 
 
      console.log(books); 
 
      }); 
 

 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="addItem" data-type="fiction" data-price="50">Add Book</button> 
 
<button class="addItem" data-type="fun" data-price="40">Add Book</button>