Question 277680 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

How to access specific data inside a JSON file on an Angular project

I’ve been trying to work with this JSON file

[
    [
        {
            "category": "Bags",
            "productData": [
                {
                    "id": 1000,
                    "name": "Trolley backpack",
                    "short description": "short description",
                    "long description": "LONG DESCRIPTION",
                    "image": "../../assets/images/catalogue/bags/trolleyBackpack.png"
                }
            ]
        },
        {
            "productData": [
                {
                    "id": 1001,
                    "name": "Laptop bag",
                    "short description": "short description",
                    "long description": "LONG DESCRIPTION",
                    "image": "../../assets/images/catalogue/bags/laptopBag.png"
                }
            ]
        }
    ],
    [
        {
            "category": "Eco",
            "productData": [
                {
                    "id": 1100,
                    "name": "Bamboo Pen drive",
                    "short description": "short description",
                    "long description": "LONG DESCRIPTION",
                    "image": "../../assets/images/catalogue/eco/bamboo-pendrive.png"
                }
            ]
        },
        {
            "productData": [
                {
                    "id": 1101,
                    "name": "Bamboo tabletop items",
                    "short description": "short description",
                    "long description": "LONG DESCRIPTION",
                    "image": "../../assets/images/catalogue/bags/bamboo-tabletop.png"
                }
            ]
        }
    ]
]

I created a service and used http.get. Then, in my app.component.ts I subscribed to the data with

 Productinfo: any = []


  constructor(private service: DataStorageService) {}

  ngOnInit() {
  
    this.service.GetProductDetails().subscribe(data => {
      this.Productinfo = data;
    })

  }

I haven’t been able to access this data in the app.component.html though

 <div class="container">
        <div class="row row-cols-sm-4 g-5">
         <div class="col-sm-6 col-md-4 d-flex justify-content-center col-lg-3" *ngFor="let products of Productinfo.productData">
          <div
          class="card card-cover h-100 overflow-hidden text-white bg-white rounded-5 shadow-lg" *ngIf="">
          <img src="{{products.image}}" style="object-fit: cover;">
          <div class="d-flex flex-column ps-3 pe-5 fontName text-light text-shadow-1 h-100"
          style="position: absolute;">
          <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold"
          style="position: relative;">
            {{products.name}}
          </h2>
            <img
            src="../../../assets/images/bonjour-logo.png"
            alt="Logo"
            width="32"
            height="32"
            class="rounded-circle border border-dark bg-dark"
            style="position: absolute; bottom: 15px;"
            />
        </div>
      </div>
    </div>

This solution with Productinfo.productData doesn’t seem to work. Should I access the productData array in my TS file?

I would also like to be able to display data conditionally as well, based on category. I would assume that *ngIf is the way to go here, but I am unsure. Is there a better way to do it?

Thanks 🙂

Tags:

3

Answers


  1. 0

    You’re on the right track. However, it seems there’s a slight misunderstanding in your HTML template.

    You need to iterate over the outer array and then over the inner arrays to access the individual products.

    <div class="container">
  <ng-container *ngFor="let categoryArray of Productinfo">
    <ng-container *ngFor="let category of categoryArray">
      <div class="row row-cols-sm-4 g-5">
        <div class="col-sm-6 col-md-4 d-flex justify-content-center col-lg-3" *ngFor="let product of category.productData">
          <div class="card card-cover h-100 overflow-hidden text-white bg-white rounded-5 shadow-lg">
            <img src="{{ product.image }}" style="object-fit: cover;">
            <div class="d-flex flex-column ps-3 pe-5 fontName text-light text-shadow-1 h-100" style="position: absolute;">
              <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold" style="position: relative;">
                {{ product.name }}
              </h2>
              <img src="../../../assets/images/bonjour-logo.png" alt="Logo" width="32" height="32" class="rounded-circle border border-dark bg-dark" style="position: absolute; bottom: 15px;">
            </div>
          </div>
        </div>
      </div>
    </ng-container>
  </ng-container>
</div>

    Regarding conditional rendering based on the category, you can use ngIf in a similar manner. For example:

    <div class="container">
  <ng-container *ngFor="let categoryArray of Productinfo">
    <ng-container *ngFor="let category of categoryArray">
      <div *ngIf="category.category === 'Bags'">
        <!-- Render content for Bags category -->
      </div>
      <div *ngIf="category.category === 'Eco'">
        <!-- Render content for Eco category -->
      </div>
      <!-- Add more conditions as needed -->
    </ng-container>
  </ng-container>
</div>
    Login or Signup to reply.
  2. 0

    Your JSON contains an array, with another array inside, which has objects with the fields "category" and "productData". Therefore, you should first loop over the array that contains the objects. Then, once you have the list of objects with the aforementioned fields, you can use a for loop to iterate over the list of productData. I think you’ll need interfaces to achieve this.

    [ <- First here with a for loop
        [ <- Then you loop this, so you can get into the object
            {
                "category": "Bags",
                "productData": [ <- inside of each object, you need to loop this in order to show productData object
                    {
                        "id": 1000,
                        "name": "Trolley backpack",
                        "short description": "short description",
                        "long description": "LONG DESCRIPTION",
                        "image": "image.png"
                    }
                ]
            }
        ]
    ]
    Login or Signup to reply.
  3. 0

    Fix the JSON stracture:

     [{
  "category":"Bags",
  "productData":[
     {
        "id":1000,
        "name":"Trolley backpack",
        "short description":"short description",
        "long description":"LONG DESCRIPTION",
        "image":"../../assets/images/catalogue/bags/trolleyBackpack.png"
     },
     {
        "id":1001,
        "name":"Laptop bag",
        "short description":"short description",
        "long description":"LONG DESCRIPTION",
        "image":"../../assets/images/catalogue/bags/laptopBag.png"
     }
  ]},{
  "category":"Eco",
  "productData":[
     {
        "id":1100,
        "name":"Bamboo Pen drive",
        "short description":"short description",
        "long description":"LONG DESCRIPTION",
        "image":"../../assets/images/catalogue/eco/bamboo-pendrive.png"
     },
     {
        "id":1101,
        "name":"Bamboo tabletop items",
        "short description":"short description",
        "long description":"LONG DESCRIPTION",
        "image":"../../assets/images/catalogue/bags/bamboo-tabletop.png"
     }
  ]}]

    I think this is stracture you expects to.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search