Hiển thị mảng JavaScript trong HTML

Thỉnh thoảng, tôi thấy một truy vấn tìm kiếm xuất hiện trên blog của mình khiến tôi quan tâm và truyền cảm hứng cho một bài đăng. Đây là một bài như vậy

Làm cách nào để lấy một mảng (có lẽ bằng JavaScript) và hiển thị nó trong HTML?

Bây giờ trong thời đại ngày nay, rất có thể tôi sẽ tiếp cận vấn đề này với thư viện giao diện người dùng như React hoặc Angular, hoặc thậm chí PHP, tùy thuộc vào việc đó là công việc hay dự án phụ

Để đơn giản và thực tế là tôi không biết làm thế nào mà người ban đầu vào blog của tôi lại tiếp cận vấn đề này, tôi sẽ sử dụng vanilla JavaScript

Tôi cũng sẽ tiếp cận vấn đề này theo một vài cách khác nhau, dựa trên một vài giả định khác nhau

Cách tiếp cận đầu tiên, cách triển khai cơ bản nhất mà tôi có thể nghĩ ra, sẽ là một mảng giá trị phẳng (không có đối tượng hoặc lồng nhau) và tôi sẽ hiển thị dữ liệu dưới dạng các giá trị được phân tách bằng dấu phẩy

const array = ['one', 'two', 'three', 'four', 'five'];
document.write(array);

Vâng, nó thực sự đơn giản nếu tất cả những gì bạn cần làm là kết xuất một mảng mà không cần bất kỳ định dạng bổ sung nào

Để tiến thêm một bước, hãy lấy cùng một mảng đó và hiển thị nó dưới dạng danh sách không có thứ tự

const array = ['one', 'two', 'three', 'four', 'five'];
document.write(`
${array.map((item) => `
${item}
`).join('')}
`);

Không có nhiều khác biệt, ngoài việc cần phải chính thức lặp lại các mục và lắp ráp HTML. .join('') ở cuối nếu cần thiết để tránh các dấu phẩy được tự động thêm vào khi hiển thị một mảng

Để tiếp tục con đường tạo HTML phức tạp hơn, tôi muốn tiến thêm một vài bước bằng cách hiển thị một mảng các đối tượng dưới dạng bảng

const array = [
	{ col1: 'one', col2: 111 },
	{ col1: 'two', col2: 222 },
	{ col1: 'three', col2: 333 },
	{ col1: 'four', col2: 444 },
	{ col1: 'five', col2: 555 },
];

document.write(`
	${array.map((row)=>(`
			${Object.values(row).map((value)=>(``)).join('')}

`)).join('')}

		  

				  
					
${value}

`);

Điều này thật tuyệt, nhưng nói chung, khi hiển thị dữ liệu ở định dạng bảng, chúng ta cũng thường muốn có tiêu đề. Vì vậy, để tiến xa hơn nữa, hãy lấy các thuộc tính đối tượng của mục đầu tiên và sử dụng chúng để tạo hàng tiêu đề cho bảng của chúng ta

const array = [
	{ col1: 'one', col2: 111 },
	{ col1: 'two', col2: 222 },
	{ col1: 'three', col2: 333 },
	{ col1: 'four', col2: 444 },
	{ col1: 'five', col2: 555 },
];

document.write(`
	${Object.keys(array[0]).map((column)=>(`
					
				`)).join('')}
			${array.map((row)=>(`
				${Object.values(row).map((value)=>(``)).join('')}
				
			`)).join('')}
		

		

			

				  
${column}
		
		

			  

					  
						
${value}
					
	
`);

Rõ ràng, có một giả định khó rằng mọi hàng đều có các cột giống nhau. Ngoài ra, bạn rất có thể tiếp cận điều này bằng cách sử dụng .forEach() và nối HTML với một biến trước khi hiển thị nó thay vì cách giống React hơn mà tôi đã tiếp cận này

Mặc dù tôi không chắc rằng bài đăng này sẽ đến được với người ban đầu đã truy cập vào blog của tôi, nhưng tôi vẫn rất vui khi được viết và hoàn thành

Khi chúng ta tiến xa hơn trong sự nghiệp của mình và tìm hiểu sâu hơn về công nghệ, chúng ta có thể đánh mất cách làm những việc đơn giản, hoặc thậm chí là cách làm những việc đơn giản mà không cần sự trợ giúp của các khuôn khổ yêu thích của mình, vì vậy, thật tốt khi dành một phút để

Làm cách nào để in một mảng JavaScript trong HTML?

Làm cách nào để chuyển mảng JavaScript sang HTML?

Làm cách nào để hiển thị giá trị mảng trong HTML?

Cách hiển thị dữ liệu từ tệp JavaScript trong HTML?