Loop through a JSON in Angular2/typescript

Question

{
  "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.

can you update the json value to the post. Also why do you do a forEach — Aravind
– Aravind, Commented May 20, 2017 at 18:46

DominicLane · Accepted Answer · 2017-05-20 20:56:53Z

1

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

});

edited May 20, 2017 at 20:56

DominicLane

351 silver badge9 bronze badges

answered May 20, 2017 at 18:50

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DominicLane Over a year ago

works like a charm without the excess '}' below console.log(product). What would be the best way to parse each object into an array for rendering to html? @Aravind

Aravind Over a year ago

so any other help you need. where do you get the data from? a service?? if so update the entire structure to the post or create a plunker I will help you.

DominicLane Over a year ago

Hey Aravind, I have updated the entire structure to the post. My plan is to create a service that serves any component that needs the data (the above code does currently sit in a component though as I'm working on it).My next challenge is to convert the filtered objects to HTML. Presumably, I need to convert each to an array and then use property binding? What would be the best way to parse it? @Aravind

Collectives™ on Stack Overflow

Loop through a JSON in Angular2/typescript

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related