Đối tượng JSON hiển thị góc trong HTML

Ống json góc định dạng đẹp

định dạng ống json

Arunkumar Gudelli

Cập nhật lần cuối vào ngày 28 tháng 3 năm 2021 1 phút đọc

Đối với mục đích gỡ lỗi, Chúng tôi có thể hiển thị dữ liệu JSON trong HTML thành phần bằng Json Tube trong Angular

Lấy đối tượng sản phẩm như được giải thích trong Angular Json Tube

{{product | json}}
{{products | json}}

Hãy nhìn vào đầu ra

{ "Id": 1, "Name": "Angular wiki" }

[ { "Id": 1, "Name": "Angular wiki" }, { "Id": 2, "Name": "Typescript" } ]

Đầu ra ở trên không được in/định dạng đẹp để hiển thị cho người dùng

Và nếu chúng ta hiển thị đối tượng json lớn thì rất khó hiểu

Vì vậy, để định dạng JSON được hiển thị, hãy sử dụng thẻ

{ "Id": 1, "Name": "Angular wiki" }

[ { "Id": 1, "Name": "Angular wiki" }, { "Id": 2, "Name": "Typescript" } ]

4 trong HTML

{{product | json}}

{{products | json}}

//Output
{
  "Id": 1,
  "Name": "Angular wiki"
}

[
  {
    "Id": 1,
    "Name": "Angular wiki"
  },
  {
    "Id": 2,
    "Name": "Typescript"
  }
]

Liên kết đến Bản trình diễn Stackblitz

Stackblitz Json Pipe Pretty Demo

Ống Json góc đẹp

Arunkumar Gudelli

Thích bài này?

Đi nào

⭐Vui lòng gắn sao Wiki góc cạnh trên GitHub. ↗

Tiếp theo

Cách thay đổi số Cổng góc [cổng ng phục vụ] từ 4200 sang số khác

Trước

Cách thay đổi màu hộp kiểm mat trong vật liệu Góc

Trong phần này chúng ta sẽ tìm hiểu cách sử dụng angular 7/8/9 để show dữ liệu từ file Json. Ngoài ra, chúng ta sẽ hiểu làm thế nào chúng ta có thể đọc các tệp json trong góc 9. Trong ví dụ dưới đây, chúng tôi đang sử dụng góc 8 để hiển thị dữ liệu của json trong bảng html. Chúng tôi sẽ sử dụng góc để tạo tệp json. Sau đó, chúng tôi sẽ sử dụng tệp json đã tạo để hiển thị dữ liệu. Vì vậy, chúng tôi sẽ sử dụng ứng dụng góc cạnh để đọc dữ liệu tệp json

Giả sử chúng ta cần sử dụng tệp json để hiển thị dữ liệu cần thiết cho giao diện người dùng và cũng muốn hiển thị dữ liệu đó ở định dạng bảng. Trong trường hợp đó, chúng tôi sẽ sử dụng lệnh ngfor, được sử dụng để hiển thị dữ liệu ở dạng bảng. Trong trường hợp của chúng tôi, chúng tôi cũng yêu cầu hiển thị dữ liệu trong các ứng dụng góc cạnh. Vì vậy, chúng tôi sẽ sử dụng bootstrap. Nếu chúng tôi đang sử dụng các phiên bản góc 6, 7, 8, 9, 10 và 11, chúng tôi có thể dễ dàng hiển thị dữ liệu từ tệp json. Để tạo tệp json, chúng tôi sẽ thực hiện theo một số quy trình từng bước, được mô tả như sau

Bước 1. Tạo ứng dụng mới

Trong bước này, chúng tôi sẽ sử dụng lệnh sau trong thiết bị đầu cuối hoặc dấu nhắc lệnh của bạn để tạo ứng dụng góc cạnh của bạn

Bước 2. Tạo tệp JSON

Trong bước này, chúng tôi sẽ thêm một số bản ghi của sinh viên

src/ứng dụng/sinh viên. json

Bước 3. Cập nhật tệp Ts

Trong bước này, chúng ta sẽ sử dụng giao diện Sinh viên để tạo một mảng các đối tượng sinh viên. Đối với điều này, chúng tôi sẽ sử dụng mã tệp sau

src/ứng dụng/ứng dụng. thành phần. ts

Bước 4. mã mẫu

Trong phần này, chúng ta sẽ sử dụng lệnh ngfor để hiển thị dữ liệu biến mảng đối tượng cho sinh viên. Trong ví dụ dưới đây, một lớp bootstrap sẽ được sử dụng

Angular 13 Hiển thị dữ liệu tệp JSON trong bảng. Tệp JSON là một tệp hữu ích giúp lưu trữ các đối tượng và cấu trúc dữ liệu đơn giản ở định dạng JSON, thường được gọi là Ký hiệu đối tượng JavaScript

Lý tưởng nhất, đó là định dạng trao đổi dữ liệu phổ biến, về cơ bản được sử dụng để truyền dữ liệu giữa ứng dụng web và máy chủ

Trong hướng dẫn này, chúng tôi sẽ đề cập đến quy trình hiển thị dữ liệu từ tệp JSON trong Bảng góc. Để thực hiện tính năng này, bạn sẽ học cách đọc tệp json ở góc 12 ngược lại hiển thị dữ liệu json trong bảng HTML

Bảng HTML có lợi cho việc sắp xếp thông tin hoặc dữ liệu, thường là theo hàng và cột hoặc có thể theo cấu trúc phức tạp rộng hơn. Bảng được áp dụng rộng rãi trong nghiên cứu, phân tích dữ liệu, v.v.

Trong hướng dẫn này, bạn sẽ tạo một ứng dụng góc cơ bản, tạo tệp dữ liệu JSON trong góc và triển khai dữ liệu json từ tệp json sang bảng HTML

Cách đọc tệp JSON góc và hiển thị dữ liệu trong bảng

• Bước 1. Cài đặt ứng dụng góc
• Bước 2. Tạo tệp dữ liệu JSON
• Bước 3. Tạo giao diện người dùng
• Bước 4. Tạo bảng Bootstrap
• Bước 5. Cập nhật tsconfig JSON
• Bước 6. Bắt đầu ứng dụng góc

Cài đặt ứng dụng góc

Trước hết, hãy đảm bảo cài đặt cli góc trên máy phát triển của bạn bằng lệnh bên dưới

npm install -g @angular/cli

Tiếp theo, với sự trợ giúp của sơ đồ Angular CLI, hãy cài đặt ứng dụng góc

ng new ng-demo

Vào bên trong thư mục dự án

cd ng new ng-demo

Thực thi lệnh để cài đặt phiên bản Bootstrap mới nhất trong góc

npm install bootstrap --save

Tiếp theo, thêm đường dẫn CSS Bootstrap trong góc. json để kích hoạt kiểu dáng

"styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "src/styles.scss"
]

Tạo tệp dữ liệu JSON

Trong bước này, bạn phải tạo một người dùng. tập tin json;

Mở và thêm mã trong src/app/users. tập tin json

________số 8

Tạo giao diện người dùng

Ở bước trước, chúng ta đã tạo một tệp JSON, bây giờ hãy vào ứng dụng. thành phần. ts, nhập tệp UsersJson và tạo giao diện NGƯỜI DÙNG

import { Component } from '@angular/core';
import UsersJson from './users.json';
  
interface USERS {
    id: Number;
    name: String;
    username: String;
    email: String;
}
@Component[{
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
}]
export class AppComponent {
  
  Users: USERS[] = UsersJson;
  constructor[]{
    console.log[this.Users];
  }
}

Tạo bảng Bootstrap

Trong bước này, bạn phải sử dụng thành phần giao diện người dùng bảng bootstrap để hiển thị dữ liệu từ tệp JSON

Bây giờ, hãy mở ứng dụng. thành phần. tệp html, nối toàn bộ mã đã cho vào tệp html góc cạnh

{ "Id": 1, "Name": "Angular wiki" }

[ { "Id": 1, "Name": "Angular wiki" }, { "Id": 2, "Name": "Typescript" } ]

0

Cập nhật tsconfig JSON

Trước khi khởi động ứng dụng, bạn phải tinh chỉnh tsconfig của mình. json, hãy xác định giải quyếtJsonModule và esModuleInterop bên trong đối tượng trình biên dịchOptions

{ "Id": 1, "Name": "Angular wiki" }

[ { "Id": 1, "Name": "Angular wiki" }, { "Id": 2, "Name": "Typescript" } ]

1

Bắt đầu ứng dụng góc

Bây giờ, bạn có thể mở terminal và bắt đầu viết lệnh đã cho và nhấn enter để khởi động ứng dụng góc cạnh

{ "Id": 1, "Name": "Angular wiki" }

[ { "Id": 1, "Name": "Angular wiki" }, { "Id": 2, "Name": "Typescript" } ]

2

Đây là url mà bạn cần để xem ứng dụng

ng new ng-demo

0

Phần kết luận

Một ứng dụng là sự hợp lưu của nhiều tính năng nhỏ, với mục đích chính là giải quyết các vấn đề của người dùng. Về mặt lý thuyết, bất cứ khi nào bạn nhìn thấy, bạn sẽ tìm thấy dữ liệu ở mọi nơi. Hiếm khi, bạn phải tích hợp dữ liệu ở định dạng bảng, như chúng ta đã thảo luận trước đây, bảng hữu ích như thế nào để hiển thị dữ liệu

Hướng dẫn này đã dạy chúng tôi cách tìm nạp dữ liệu từ tệp JSON và hiển thị dữ liệu trong bảng. Chúng tôi cũng đã xem xét cách sử dụng chỉ thị nfFor để hiển thị dữ liệu json. Chúng tôi hy vọng bạn thích hướng dẫn này;

máy đào

Tôi là Digamber, một nhà phát triển full-stack và là người đam mê thể dục. Tôi đã tạo trang web này để truyền kinh nghiệm mã hóa của mình cho các lập trình viên mới. Tôi thích viết trên JavaScript, ECMAScript, React, Angular, Vue, Laravel

Twitter GitHub

Bài viết đề xuất

Hướng dẫn liên kết chọn phần tử với đối tượng trong góc 14 Hướng dẫn về góc 14 Chụp ảnh từ Webcam hệ thống Cách tạo phân trang phía máy chủ trong ứng dụng Angular 14 Cách hiển thị Ẩn Div trên nút Radio Nhấp vào trong Angular 14Angular 14 Hướng dẫn phát hiện chiều rộng và chiều cao của màn hình Hướng dẫn về các biểu mẫu phản ứng màu trắng / trống

Làm cách nào để hiển thị đối tượng JSON trong HTML góc?

Làm cách nào để liên kết dữ liệu JSON với bảng HTML bằng Angular?

Làm cách nào để đọc tệp JSON trong Angular 8 bằng HTTP?

Làm cách nào để lấy dữ liệu từ đối tượng JSON trong Angular 12?