Trying to get a grasp of Javascript. Let's say I have a variable declared with template literals:
var templateObject = `Student name is ${filteredJSONExample.name} and student age is ${filteredJSONExample.age}.`
This functions correctly as shown below:
https://i.sstatic.net/YaKco.png
However, when dealing with JSON data that contains a template literal wrapped string as a value, it doesn't behave the same way.
var templateDataObject = [
{"type": "template", "fields": {"template": "`Student name is ${filteredJSONExample.name} and student age is ${filteredJSONExample.age}`"}}
]
https://i.sstatic.net/crGO8.png
How can one insert variable values using template literals when the template is sourced from JSON data? Is there a correct approach to tackle this issue?
Check out the full code snippet below:
<html>
<head>
<title>JS Select Exercise</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b5bebeb5b2b5b1e3aab7e3bee0fee0fee4abb6c777">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<div class="container">
<hr/>
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<select class="form-control" id="select_demo" onchange=onKidChange(this)></select>
<br/>
<h3 id="agevalue"></h3>
<br/>
<h3 id="statement"></h3>
<button class="btn btn-sm btn-primary" onclick=printStatement()>Print Statement</button>
<br/><br/>
<button class="btn btn-sm btn-info" onclick=printAnotherStatement()>Print Another Statement</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var jsonDataObject = [
{"model": "A", "identifier": 1, "fields": {"name": "Stan", "age": "12"}},
{"model": "B", "identifier": 2, "fields": {"name": "Brett", "age": "14"}}
]
var filteredJSONExample = jsonDataObject[0]['fields']
var templateDataObject = [
{"type": "template", "fields": {"template": "`Student name is ${filteredJSONExample.name} and student age is ${filteredJSONExampl...
// Error: text too long for AI to rewrite
Your help on this matter is highly appreciated!