How do I replace content that based on the HTML UI Template

JK1536 
Created at Feb 12, 2024 12:51:19 
  1,158   0   0  

When UI Design is provided or made for specific purpose, we may need to find the easy way can fill it up if that is based on HTML Table.

Below case is what I tried during implementing WE Service:

	var tmp =
	`<tr>
		<td valign=top>[Name]</td>
		<td valign=top>[ResourceType]</td>
		<td valign=top>[City]</td>
		<td valign=top>[County]</td>
		<td valign=top>[Description]</td>
		<td valign=top>[GoogleMapLink]</td>
		<td valign=top>[Phone]</td>
		<td valign=top>[Address]</td>
		<td valign=top>[WebLink]</td>
	</tr>`;

	tmp = tmp.replace('[Name]', v.Name);
	tmp = tmp.replace('[ResourceType]', v.ResourceType);
	tmp = tmp.replace('[City]', city);
	tmp = tmp.replace('[County]', county);
	tmp = tmp.replace('[Description]', (v.Description==null) ? "":v.Description);
	tmp = tmp.replace('[GoogleMapLink]', `<a href="` + google_map_url + `" target=_blank>Google Map</a>`)
	tmp = tmp.replace('[Phone]', `<nobr>` + ((v.Phone==null) ? "":v.Phone) + `</nobr>`);
	tmp = tmp.replace('[Address]', `<a href="` + google_map_url + `" target=_blank>` + address + `</a>`);
	tmp = tmp.replace('[WebLink]', `<a href="` + v.WebLink + `" target=_blank>Website</a>`);
	return tmp;

 

If we have multiple items, we can fill it up in the for loop. Personally I prefer to use forEach loop like below:

	g_dataset.data.forEach( function(v) {
		if (v.City!=null)
		{
			if (city==v.City)
			{
				console.log(v);
				html += get_table_row(v);
			}
		}
	});

 



Tags: HTML Template JavaScript WE Service forEach Share on Facebook Share on X

◀ PREVIOUS
Creating a simple Java Servlet (Web Server Page) with Apache Maven on Microsoft Windows

▶ NEXT
Java Servlet Example

  Comments 0
OTHER POSTS IN THE SAME CATEGORY

Java Servlet Example

(created at Feb 19, 2024)

Creating a simple Java Servlet (Web Server Page) with Apache Maven on Microsoft Windows

(created at Jan 28, 2024)

Dataset of California Foodbanks

(updated at Feb 12, 2024)

Java Tutorials associated with AP Computer Science A

(updated at Jun 15, 2024)

Java Inner Classes

(updated at May 10, 2024)

Java Polymorphism

(created at Jul 18, 2023)

Java Inheritance (Subclass and Superclass)

(updated at May 10, 2024)

Java Packages

(updated at May 10, 2024)

Java Abstract Classes and Methods

(updated at Jan 02, 2024)

Java Classes and Objects

(updated at May 10, 2024)

Java Recursion

(updated at May 10, 2024)

Java Scope

(updated at May 10, 2024)

Java Methods

(updated at May 10, 2024)

Java Arrays

(updated at May 13, 2024)

Java While Loop/Do While Loop/For Loop/For-Each Loop/Break/Continue

(updated at May 13, 2024)

Java Switch Statements

(updated at May 15, 2024)

UPDATES

LoL Worldcup - Worlds 2024 Finals Opening Ceremony Presented by Mastercard ft. Linkin Park, Ashnikko and More!

(created at Nov 18, 2024)

The hippie perm of NewJeans' Danielle 

(updated at Nov 15, 2024)

Danielle was featured on the UK Fashion Pop Magazine cover

(updated at Nov 15, 2024)

IU Photos from her family trip

(updated at Nov 09, 2024)

Men vs. Women Taekwondo Sparring - Beautiful Taekwondo Star Tammy's Dazzling Roundhouse Kicks

(updated at Nov 09, 2024)

Legendary Taekwondo Match of the Korean National Sports Festival in High School Division

(updated at Nov 09, 2024)

Legendary Taekwondo 540 degree Kick - Champion Hyun-goo Noh

(created at Nov 09, 2024)

The difference between Equation and Formula

(created at Nov 08, 2024)

Lengendary Turkish Taekwondo player Tazegul at 2015 WTF World Taekwondo Championships

(updated at Nov 08, 2024)

World Rank #2 - Turkey TKD Legend Servet Tazegül

(created at Nov 07, 2024)

Irvine Restaurant American-Style Vietnamese Food Brodard (ft. Ultimate Spring Roll)

(updated at Nov 03, 2024)

Block unwanted URLs for comfortable web browsing with Chrome Addon - URL Blocker

(updated at Nov 01, 2024)

The Gigant Cowboys of Virginia City, Nevada 1889 - AI Generated Photos

(updated at Oct 28, 2024)

Sushi Koto: The "Ohtani" Sushi Spot in Irvine

(created at Oct 26, 2024)

Modern Web Indexing Technology - IndexNow

(updated at Oct 24, 2024)

Key Differences in Gen Z/Alpha/Zalpha based on Upbringing and Life Experiences

(updated at Oct 22, 2024)

Zalpha Generation: A New Term for the Children of Gen Z and Millennials

(updated at Oct 22, 2024)

Zalpha: A Global Trend, Not Just a Distant Concept

(updated at Oct 22, 2024)

The Generation Corona (+ Gen Z) is grappling with how to communicate and live alongside Gen Alpha

(updated at Oct 21, 2024)

Porto's Bakery in Buena Park: A Review from Irvine

(created at Oct 20, 2024)

Starship, Super Heavy, Successful Ground Landing

(updated at Oct 19, 2024)

Understanding Texas A&M - a leading research university, receiving significant funding from both the government and private sector

(updated at Oct 18, 2024)

Exploring UC Davis (aka UCD) - Schools and Majors

(updated at Oct 16, 2024)

AI Generated One-Punch Man with old school style TV shows

(updated at Oct 15, 2024)

One-Punch Man Analysis: The Bald Cape Hero

(updated at Oct 15, 2024)

Why One-Punch Man is a Great Action Anime?

(updated at Oct 15, 2024)

The War of Dogs and Cats - AI-Generated Video by AlgoContent

(updated at Oct 15, 2024)

Dreamy indie band Room402's song "Like the Moon in the Daytime" with AI-generated video

(updated at Oct 15, 2024)

One-Punch Man's Saitama: Motivational Quotes and the Hero's Story

(updated at Oct 13, 2024)

Cream Pan: A Must-Visit Japanese Bakery in Fountain Valley

(created at Oct 13, 2024)

NewJeans - Chicago Live at Lollapalooza 2023

(updated at Oct 12, 2024)

One-Punch Man: Saitama's Promotion Journey and the Final Goal as a Hero

(updated at Oct 12, 2024)

One-Punch Man Combat Power Rankings

(created at Oct 12, 2024)

Difference in HEAD and GET for HTTP Request - why HEAD Request could be used for DDoS Attack?

(updated at Oct 11, 2024)

AI Generated Sailor Moon Video - In the name of justice, I will not forgive you!

(updated at Oct 11, 2024)

Snack that makes my mouth happy when winter comes from the U.S - Hot Pockets

(updated at Oct 11, 2024)

One-Punch Man Crafted by AI - Witness the Limitless Power of Sora AI

(updated at Oct 11, 2024)

My chrome browser is annoying me by Language - How do I change the default language?

(updated at Oct 11, 2024)

AI-Generated Berserk: A Majestic Sight

(updated at Oct 11, 2024)

Global Electronic Medicine Trends and Market Outlook 

(updated at Oct 09, 2024)

What is Google Analytics?

(updated at Oct 09, 2024)

Understanding the Key Differences Between GIS and LBS: Purpose, Technology, and Applications

(updated at Oct 09, 2024)

The Evolution and Applications of Geographic Information Systems: From Thematic Mapping to Efficient Data Analysis and Management

(created at Oct 09, 2024)

Quantum computer and qubit generation method

(updated at Oct 08, 2024)

Green Premium, Eco-Certified Building

(updated at Oct 08, 2024)

Why Two Path Authentication is Essential - My Microsoft Account is Gone!

(updated at Oct 08, 2024)

Amazon's Return-to-Office Mandate: A Bold Move or a Step Backwards?

(updated at Oct 08, 2024)

Exploring UC Merced (aka UCM) - Schools and Majors

(updated at Oct 08, 2024)

Understanding Rose-Hulman Institute of Technology

(updated at Oct 08, 2024)

Understanding Rensselaer Polytechnic Institute based in New York

(updated at Oct 08, 2024)