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

JK JK 2038 
Created at  
7,210 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 Facebook X
Comments 0
Similar posts
  1. Regular Expressions in JavaScript
    7,679
  2. Difference between Java and Javascript
    7,713
  3. Dataset of California Foodbanks
    7,224
  4. RegExp example in Python to exclude javascript from HTML code
    7,106
  5. Loading XML Data with JavaScript
    7,570
  1. Java Servlet Example
    7,174
  2. Creating a simple Java Servlet (Web Server Page) with Apache Maven on Microsoft Windows
    7,239
  3. Java Tutorials associated with AP Computer Science A
    7,744
  4. Java Inner Classes
    7,134
  5. Java Polymorphism
    7,110
  6. Java Inheritance (Subclass and Superclass)
    7,234
  7. Java Packages
    7,234
  8. Java Abstract Classes and Methods
    7,843
  9. Java Classes and Objects
    7,176
  10. Java Recursion
    7,240
  11. Java Scope
    7,180
  12. Java Methods
    7,149
  13. Java Arrays
    8,927
  14. Java While Loop/Do While Loop/For Loop/For-Each Loop/Break/Continue
    8,007
  15. Java Switch Statements
    7,485
  16. Java Short Hand If...Else (Ternary Operator)
    7,656
Recently updated
  1. Comprehensive Guide to Recent Critical PHP Vulnerabilities
    511
  2. How to Check Your UIUC Graduation Progress Using DARS Audit
    471
  3. Michael Jackson's Billie Jean
    341
  4. Meet A2O Lite: Korea's Newest K-Pop Cuties with Addictively Catchy Melodies
    223
  5. Why You Can't Stop Watching Jack Bryan's Beatbox Gaming Shorts
    254
  6. Song So-hee: The Soulful Voice Touching Hearts Through Korean Music
    279
  7. Watch This Dazzling Dancer’s Mind-Blowing Moves
    293
  8. Bootstrap vs. Tailwind CSS: Origins, Features, Pros & Cons, and How to Choose the Right Framework
    330
  9. The Complete Guide to Golang: History, Features, Real-World Uses, and Code Examples
    978
  10. Telemetry vs. Analytics: Understanding the Difference and Why It Matters
    473
  11. The Evolution and Production Reality of Agentic AI
    371
  12. How to Activate or Waive Your UIUC Student Health Insurance
    468
  13. Complete Guide to Building a Machine Learning Model
    494
  14. My life cuts at Las Vegas during Thanksgiving day holiday
    7,570
  15. The Cybercab Transformation: From Autonomous Taxi to Mobile Base Station
    515
  16. Harness vs. OpenClaw: Two Very Different "Agents"
    1,252
  17. Clean Python Environments: The Power of venv vs. Docker
    1,043
  18. What is Docker? Why is Docker also useful in a development environment?
    765
  19. UIUC 2026-2027 Academic Calendar
    1,885
  20. How to Build Llama 3 AI Apps with Python: Setup & User Prompts
    1,003
  21. Open-Source LLMs: The AI Revolution
    930
  22. Resume 2.0: Leveling Up for My First Software Gig
    2,730
  23. Not everyone will understand what this man just did
    2,259
  24. UIUC Dorm Guide: Find Your Perfect Fit !!
    1,783
  25. Unpacking IU's Shopper
    935
  26. Jackie Chan's Police Story: The Action Masterpiece
    811
  27. The IVE Story: Identity, 'I AM' Charts, and Influence
    1,127
  28. Tech Visionaries who graduated at UIUC - You are the Next Turn
    1,339
  29. Open Databases for Sex Crime Occurrences in the U.S.
    901
  30. Automatically copy text to the clipboard when dragging the mouse in the Cursor
    3,136
  31. My First Day at University of Illinois-Urvana Champaign
    1,335
  32. Sand, Sea, and a Splash of Fun at Newport Beach: A Family Adventure
    8,343
  33. Sun, Rocks, and Adventure: A Day at Joshua Tree National Park
    8,427
  34. Sipping the Stars: My Starbucks Adventure
    9,982
  35. Exciting explore at Sequoia National Park
    7,826
  36. My Life Shot at Death Valley
    1,955
  37. Ip Man fights with Muay Thai Master
    1,093
  38. Mad Clown - Don't Die
    1,206
  39. How to get Student Enrollment and Degree Verification at UIUC
    5,501
  40. LAX Thanksgiving Rush: A Joyful Reunion
    1,048
  41. ZO ZAZZ(조째즈) - Don`t you know (모르시나요) (PROD.ROCOBERRY)
    1,295
  42. FISHINGIRLS Unleashes Energetic EP 'Funiverse' Featuring Signature Track 'Fishing King'
    1,116
  43. 10CM - To Reach You (너에게 닿기를)
    1,301
  44. Feeling weak? Transform yourself at the UIUC ARC!
    1,707
  45. BOYNEXTDOOR - If I Say I Love You
    1,331
  46. The Future of Software Engineer - AI Engineering
    1,056
  47. G Dragon x Taeyang (Eyes Nose Lips, Power, Home Sweet Home, GOOD BOY) - LE GALA PIÈCES JAUNES 2025
    1,057
  48. Lie - Legend song by BIGBANG
    7,953
  49. Why ROLLBACK is useful when you work with Google Gemini CLI?
    1,030
  50. Reimbursement after Vaccination at McKinley Health Center
    1,162