| 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
| 
107 
0 
0 
0 
1184