DominicLane
DominicLane

Reputation: 35

Loop through a JSON in Angular2/typescript

{
  "data": [
    {
      "type": "product",
      "id": "138e45b2-5321-8d6c-94d0079ac1f6",
      "name": "Hendricks",
      "slug": "hendrick",
      "sku": "fcusdfckss",
      "manage_stock": false,
      "description": "hello",
      "price": [
        {
          "amount": 23,
          "currency": "gbp",
          "includes_tax": true
        }
      ],
      "status": "live",
      "commodity_type": "physical",
      "relationships": {
        "categories": {
          "data": [
            {
              "type": "category",
              "id": "0d9143-4266-b682-2c8cac60afbb"
            }
          ]
        }
      },
      "meta": {
        "display_price": {
          "with_tax": {
            "amount": 23,
            "currency": "GBP",
            "formatted": "0.00"
          },
          "without_tax": {
            "amount": 23,
            "currency": "GBP",
            "formatted": "0.00"
          }
        },
        "stock": {
          "level": 0,
          "availability": "out-stock"
        }
      }
    },
    {
      "type": "product",
      "id": "726b64bd-9f16-9191-ff1b6a4ef23f",
      "name": "Tanquerary",
      "slug": "tanq",
      "sku": "fghjdsm",
      "manage_stock": false,
      "description": "A great gin with citrus notes",
      "price": [
        {
          "amount": 88,
          "currency": "gbp",
          "includes_tax": true
        }
      ],
      "status": "live",
      "commodity_type": "physical",
      "relationships": {
        "categories": {
          "data": [
            {
              "type": "category",
              "id": "0d914d6d-4266-b682-2c8cac60afbb"
            }
          ]
        }
      },
      "meta": {
        "display_price": {
          "with_tax": {
            "amount": 88,
            "currency": "GBP",
            "formatted": "0.00"
          },
          "without_tax": {
            "amount": 88,
            "currency": "GBP",
            "formatted": "0.00"
          }
        },
        "stock": {
          "level": 0,
          "availability": "out-stock"
        }
      }
    },
    {
      "type": "product",
      "id": "74ab6970-ffdd-4dfd-1816e081cd72",
      "name": "Bombay Sapphire",
      "slug": "bombay",
      "sku": "bomsaph193",
      "manage_stock": true,
      "description": "A great gin with floral notes",
      "price": [
        {
          "amount": 1999,
          "currency": "gbp",
          "includes_tax": true
        }
      ],
      "status": "live",
      "commodity_type": "physical",
      "relationships": {
        "categories": {
          "data": [
            {
              "type": "category",
              "id": "46569361-1352-83e6-13477074f952"
            }
          ]
        }
      },
      "meta": {
        "display_price": {
          "with_tax": {
            "amount": 1999,
            "currency": "GBP",
            "formatted": "0.00"
          },
          "without_tax": {
            "amount": 1999,
            "currency": "GBP",
            "formatted": "0.00"
          }
        },
        "stock": {
          "level": 5,
          "availability": "in-stock"
        }
      }
    }
  ],
  "links": {
    "current": "...link...?page[limit]=100&page[offset]=0",
    "first": "...link...",
    "last": null
  },
  "meta": {
    "results": {
      "total": 3,
      "all": 3
    },
    "page": {
      "limit": 100,
      "offset": 0,
      "current": 1,
      "total": 1
    }
  }
}

I need to display the results of a returned JSON object using Angular 2. I am trying to use Lodash to filter out the unrequired key-value pairs.

I have filtered out the values using:

      products.data.forEach(element => {
        var prodr = _.pick(products.data, ['0.name', '0.sku', '0.description', '0.price.0.amount']);
        console.log(prodr);
    });

This code loops through the objects but returns objects of the same value because I have set them to "0". I think I need to set them to "i" and add in a for function, but I am quite new to javascript and typescript and I can't get the syntax right.

Upvotes: 1

Views: 6390

Answers (1)

Aravind
Aravind

Reputation: 41573

When you are using forEach as per your sample data, the below code should work

 products.data.forEach(element => {
    let product = {
                name : element.name, 
                sku : element.sku, 
                description : element.description,
                price: element.price[0].amount
                }
    console.log(product);

});

Upvotes: 1

Related Questions