What are the ways to integrate JSON data into Angular?

Question

What are the ways to integrate JSON data into Angular?

I am facing some issues with integrating JSON in Angular.

Within my project, I am generating components and deleting the spec.ts files.

Subsequently, I create a new file called prod.data.json

{
    "products" :
        [
            {
                "sku" : "10",
                "name" : "Laptop Blue Background",
                "saleTag" : false,
                "prodImage" : "img",
                "price" : "210",
                "discountly" : "200",
                "revives" : "3",
                "summary" : "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only",
                "availability" : "In Stock",
                "categori" : "Business",
                "tag" : "Book",
                "share" : {
                        "facebook" : "link",
                        "twitter" : "link",
                        "instagram" : "link",
                        "linkedin" : "link"
                },

The JSON code follows this format.

The file content.companents.ts consists of the following codes:

import prodData from '/Users/obasekin/angular-crash/src/app/prod.data.json';
interface Product {
  sku: Number;
  name: String;
  saleTag: String;
  prodImage: String;
  price: Number;
  discountly: Number;
  revives: Number;
  summary: String;
  availability: String;
  catagori: String;
  tag: String;
  share: {
    facebook: String;
    twitter: String;
    instagram: String;
    linkedin: String;
  };
  description: {
    desSummary: String;
    desList: {
      lineMono: String;
      lineDi: String;
      lineTri: String;
      lineTetra: String;
      linePenta: String;
      lineHexa: String;
    };
  };
}

I am importing the format as either String or Number.

The issue lies within this code:

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {

  constructor() { }

  products: Product[] = prodData;
  
  ngOnInit(): void {
  }

}

The problem occurs in this line:

products: Product[] = prodData;

The issue is as follows:

Click here for more details

Update 1

I have included the tsconfig.json file:

"resolveJsonModule": true,
"esModuleInterop": true

Alternatively, another problem persists:

See more details here

Regards

css json angular typescript

Answer 1

Answer №1

The values in your prod.data.json file were incorrectly set as strings instead of numbers.

To correct this, update the values as shown below:

{
  "products": [
    {
      "sku" : 10,
      "name" : "Laptop Blue Background",
      "saleTag" : false,
      "prodImage" : "img",
      "price" : 210,
      "discountly" : 200,
      "revives" : 3,
...

Answer 2

The values in your prod.data.json file were incorrectly set as strings instead of numbers.

To correct this, update the values as shown below:

{
  "products": [
    {
      "sku" : 10,
      "name" : "Laptop Blue Background",
      "saleTag" : false,
      "prodImage" : "img",
      "price" : 210,
      "discountly" : 200,
      "revives" : 3,
...

Answer 3

Answer №2

The reason for this issue is that the variable prodData is not an array; it's actually an object that contains an array of products.

To fix this problem, you need to introduce a wrapper object in your interface:

export interface Inventory {
  products: Product[];
}

export interface Product {
  ...
}

After defining the wrapper object, make the following changes in your class file:

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {

  constructor() { }

  inventory: Inventory = prodData;
  
  ngOnInit(): void {
  }

  get products(): Product[] {
    return this.inventory.products;
  }

}

Answer 4

The reason for this issue is that the variable prodData is not an array; it's actually an object that contains an array of products.

To fix this problem, you need to introduce a wrapper object in your interface:

export interface Inventory {
  products: Product[];
}

export interface Product {
  ...
}

After defining the wrapper object, make the following changes in your class file:

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {

  constructor() { }

  inventory: Inventory = prodData;
  
  ngOnInit(): void {
  }

  get products(): Product[] {
    return this.inventory.products;
  }

}

Answer 5

Answer №3

I have just created a new file called:

content.interface.ts

Here is the content of the file:

export interface IProduct {
    sku: Number;
    name: String;
    saleTag: boolean;
    prodImage: String;
    price: Number;
    discountly: Number;
  }

Additionally, I created another file named:

content.components.ts

I imported both files and specified their paths as follows:

import prodData from '../(what was ur json file name).json';

import {IProduct} from './content.interface'

Lastly, I exported the class in the following way:

export class ContentComponent implements OnInit {
      products: IProduct[] = prodData.products;
}

Everything is now working perfectly.

Answer 6

I have just created a new file called:

content.interface.ts

Here is the content of the file:

export interface IProduct {
    sku: Number;
    name: String;
    saleTag: boolean;
    prodImage: String;
    price: Number;
    discountly: Number;
  }

Additionally, I created another file named:

content.components.ts

I imported both files and specified their paths as follows:

import prodData from '../(what was ur json file name).json';

import {IProduct} from './content.interface'

Lastly, I exported the class in the following way:

export class ContentComponent implements OnInit {
      products: IProduct[] = prodData.products;
}

Everything is now working perfectly.

What are the ways to integrate JSON data into Angular?

Answer №1

Answer №2

Answer №3

Similar questions

Any tips on how to convert a bincode serialized data into serde_json::Value?

The HTML element in the side menu is not adjusting its size to fit the parent content

What is the correct way to type this object conversion?

Issue observed with alignment not being corrected when the browser is resized on a responsive webpage

Swap out the div element with a loading.gif image right before the page finishes loading, then pause for 3 seconds before getting rid of

How can I convert JSON data to a List of classes and vice versa?

The challenge of styling React components

Using PHP's mysqli function to generate a JSON array

css background-size and image position not working

Using a single TypeORM connection across various modules in NestJS

Fetch the Future<list<DATA>> array from an API in Flutter and parse the JSON response

Divide the page vertically. On the left side, feature an eye-catching image, while on the right side,

Communication between React.js and Node.js in VS Code

Overlapping agendas within Microsoft Planner

Converting a JSON Response to a Pandas Dataframe

Aligment issues in columns on Bootstrap 5

Issue with loading scripts in CodeIgniter, jQuery Mobile, and jQuery UI - scripts are not loading initially, requires a refresh to

The IntrinsicAttributes type does not contain a property called 'theme'

Error TS2322: You cannot assign a Promise<any> to a string type

Assistance needed for disabled JavaScript