无法在angular2中循环json对象

Question

我有一个如下的响应对象：

如果我遍历此对象，则会给我错误 错误TypeError：无法读取未定义的属性“ forEach”

我的代码：

 getBooklist() {
         return this.http.get('https://anytime-library-d705a.firebaseio.com/books.json')
      .pipe(map((res: Response) => res.json()));
    }

this.dataStoreService.getBooklist()
    .subscribe((booklist: Book[]) => {
        console.log(booklist);
        this.books = [];
        booklist.forEach(element => {
          const y = element;
          this.books.push(y as Book);
        });

Answer 1

booklist是对象，而不是 array 。

您必须使用Object.keys方法。

Object.keys(booklist).forEach(key=> {
    this.books.push(booklist[key] as Book);
});

Answer 2

<script> function initListaOrcamento() { var products = $.CestaFeira({ debug: true }).getItems(), totalValueTemp = 0, $cartItems = $('#cart-items'); if (!products) { console.log("No items in cart!"); return; } function updateTotalValue() { var totalValue = 0; $.each($('[data-item-total-value]'), function (index, item) { totalValue += $(item).data('item-total-value'); }); $('#total-value').html("$" + parseFloat(totalValue).toFixed(2)); } function mountLayout(index, data) { var totalValueTemp = parseFloat(data.unity_price) * parseInt(data.quantity); var $layout = "<tr id='product-"+ index +"'><td class='col-sm-8 col-md-6'><div class='media'>" + "<img class='d-flex align-self-center mr-3' src='http://placehold.it/72x72?text="+index+"' alt=''>" + "<div class='media-body'>" + "<h5 class='mt-0'>"+ data.product_name +"</h5>" + "</div></div></td><td class='col-sm-1 col-md-1' style='text-align: center'>" + data.quantity + "<td class='col-sm-1 col-md-1 text-center'><strong>$"+ data.unity_price +"</strong></td>" + "<td class='col-sm-1 col-md-1 text-center' data-item-total-value='"+totalValueTemp+"'><strong>$"+parseFloat(totalValueTemp).toFixed(2)+"</strong></td>" + "<td class='col-sm-1 col-md-1'>" + "<a href='javascript:;' class='btn btn-danger fa fa-trash' data-cesta-feira-delete-item='"+ index +"'><span class='sr-only'>Remove</span></a>" + "</td></tr>"; $cartItems.append($layout); } $.each(products, function (index, value) { mountLayout(index, value); }); updateTotalValue(); $(document).on('click', 'a[data-cesta-feira-delete-item]', function(e) { e.preventDefault(); var productId = $(this).data('cesta-feira-delete-item'); if($(document).on('cesta-feira-item-deleted')){ $('#product-'+productId).fadeOut(500, function() { $(this).remove(); updateTotalValue(); }); } }); $(document).on('cesta-feira-clear-basket', function (e) { $('#cart-items tr').each(function (index, value) { $(value).fadeOut(500, function() { $(this).remove(); updateTotalValue(); }); }); }); } $(document).ready(function () { initListaOrcamento(); }); </script> 是一个没有内置迭代器的对象。

更改：

booklist

为此使用Object.values方法：

booklist.forEach(element => {
          const y = element;
          this.books.push(y as Book);
        });