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

JK1720 
Created at Feb 12, 2024 12:51:19 
  6,638   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
SIMILAR POSTS

Regular Expressions in JavaScript

(updated at Oct 03, 2024)

Difference between Java and Javascript

(updated at Oct 03, 2024)

Dataset of California Foodbanks

(updated at Feb 12, 2024)

RegExp example in Python to exclude javascript from HTML code

(created at Mar 22, 2024)

Loading XML Data with JavaScript

(updated at Oct 03, 2024)

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

Feeling weak? Transform yourself at the UIUC ARC!

(updated at Aug 28, 2025)

Public Transportation between Chicago O'Hare International Airport and UIUC (University of Illinois at Urbana-Champaign)

(updated at Aug 27, 2025)

How to Receive Mail and Packages in University Housing at UIUC

(updated at Aug 27, 2025)

When you are too busy to have your breakfast/lunch/dinner, use Good2Go Carryout Program

(created at Aug 27, 2025)

Why Outlook’s Redirection Option Is a Game-Changer

(updated at Aug 27, 2025)

Where to Eat with Your i-Card at UIUC and How to Track Your Dining Dollars

(updated at Aug 24, 2025)

Why Every Freshman Needs the Illinois App at UIUC

(updated at Aug 24, 2025)

Did you get Selective Service System(SSS) Form 3C?

(updated at Aug 17, 2025)

BlackPink's refreshing song - Jump

(updated at Aug 08, 2025)

Poisonous Mushrooms sprouted along the roadside after Typhoon

(updated at Aug 06, 2025)

Annual Weather Forecasting in Illinois based on Month

(updated at Aug 06, 2025)

My name has a typo in MyIllini - Need a Biographical change form

(updated at Jul 31, 2025)

Free Transportation Systems for UIUC students, faculty, and staff with I-Card

(updated at Jul 31, 2025)

What you can do with I-Card at UIUC

(updated at Jul 31, 2025)

Selecting a Bed Configuration before you move-in at UIUC Dormitory

(updated at Jul 30, 2025)

Student Health Insurance Waiver: Major Deadlines You Can’t Miss

(updated at Jul 22, 2025)

Types of Memory and Storage

(updated at Jul 22, 2025)

Sample Curriculum Comparison CS versus CS+GGIS at UIUC

(updated at May 31, 2025)

UIUC 2025-2026 Academic Calendar

(updated at May 26, 2025)

IU (아이유) appeared at Mask Singer with Violet Fragrance (보라빛 향기)

(updated at Apr 17, 2025)

What is Model Context Protocol (MCP)? How to build AI Agents?

(updated at Apr 17, 2025)

송소희(Song Sohee) - Not a Dream

(updated at Apr 08, 2025)

DOH KYUNG SOO & LEE SUHYUN - Rewrite The Stars cover

(created at Apr 08, 2025)

😲😭 디오(D.O.) - 후라이의 꿈 + Rewrite the stars(with. 수현)

(created at Apr 08, 2025)

D.O. (도경수) & IU (아이유) - Love Wins All | IU’s Palette (아이유의 팔레트)

(updated at Apr 08, 2025)

Lie - Legend song by BIGBANG

(updated at Feb 26, 2025)

Happy New Year Message with Mathematical Equations

(updated at Jan 02, 2025)

Life Quotes from Google CTO Will Grannis emphasizes the importance of data and the problem definition

(updated at Dec 17, 2024)

Life Quotes from Netflix CTO Elizabeth Stone in 2023

(updated at Dec 17, 2024)

Exploring UC Irvine (aka UCI) - School and its Majors

(updated at Dec 13, 2024)

Understanding Rose-Hulman Institute of Technology

(updated at Dec 13, 2024)

Chilling Acrobatic Taekwondo! The Birth of a Poomsae Prodigy - Byeon Jae-yeong Wins 1st Place at the Hong Kong World Poomsae Championships

(created at Dec 12, 2024)

IU's breathtakingly beautiful "eight" live performance, captivating the hearts of the audience with her dazzling vocals

(created at Dec 10, 2024)

Navigation for UMass Amherst (aka University of Massachusetts Amherst) - Campus Life and Underground Majors

(updated at Dec 10, 2024)

Exploring UC San Diego (aka UCSD) - School and its Majors

(updated at Dec 10, 2024)

How to access websites blocked by ESNI and ECH settings with Firefox!

(updated at Nov 29, 2024)

[#2024MAMA] G-DRAGON - HOME SWEET HOME (feat. Taeyang, Daesung) | Mnet 241123

(updated at Nov 27, 2024)

Eveything you tell HR is confidential

(updated at Nov 27, 2024)

The hippie perm of NewJeans' Danielle 

(updated at Nov 23, 2024)

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

(created at Nov 18, 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)