I do have a velocity template something like
<TABLE>
<TH>
NAME
</TH>
<TR>
$!{name}
</TR>
.....other code......
#foreach( $!{grade} in $!{student.gradeList} )
<tr>
<td align="center">$!{grade.mathGrade}</td>
<td align="center">$!{grade.scienceGrade}</td>
</tr>
#end
below is my json file
{
"name":"xyz",
...other variables....
}
So, now I want to test this, but I am getting error that Variable $student has not been set. I checked that $student is not defined anywhere else in template. I tried to give random string value for that something like "student":"XYZ" but then it gave error that String does not have property named gradeList. How to solve this?
I found the solution, where I added student as an object in my json file something like:
{
"name": "XYZ",
"student": {
"gradeList": [
{
"mathGrade": "A"
},
{
"scienceGrade": "B"
}
]
}
}
Related
I have a JSON that is coming like this and I want to show this JSON in the table in React.
{
"Status": true,
"discounts": {
"individual": {
"number_of_cars_discount": {
"1": "1",
"10": "1",
"2": "0.98",
}
}
},
"main_price": {
"client_type": "individual",
"large_car": {
"100": "3",
"1000": "0.9",
"100000": "0.60",
},
}
}
So to do this, I defined
const [mainPrice, setMainPrice] = useState({});
in the parent component and I fetched it like this:
setMainPrice(res.data.main_price);
I sent the mainPrice to the child component where I want to display JSON in the table:
<tbody>
<tr>
<td>
{Object.keys(individualPosts).map((key) => (
<tr>
<td key={key}>{individualPosts[key]}</td>
</tr>
))}
</td>
<td>
{Object.keys(mainPrice.large_car).map((key) => (
<tr>
<td key={key}>{mainPrice.large_car[key]}</td>
</tr>
))}
</td>
</tr>
</tbody>
But it gives me an error: TypeError: Cannot convert undefined or null to object
But I couldnt figure out why.
I have other types of cars like large_cars, small_cars so I need to take the mainPrice like this. I don't want to define all the types of cars and send them to the child component as a props. Or should I make it like this?
Please give me advice and the solution.
Null check required in such cases to avoid errors.
Try this
<td>
{Object.keys(mainPrice?.large_car).length > 0 && Object.keys(mainPrice?.large_car).map((key) => (
<tr>
<td key={key}>{mainPrice.large_car[key]}</td>
</tr>
))}
</td>
I am taking mmy first steps in Angular and was about to try populating a table with data stored in a JSON file. Facing a bit of an odd/unexpected situation there as the table doesn't look exactly how I expected it to look. First things first.
Table code:
<table class="table table-sm table-bordered">
<thead>
<tr>
<th>Transfers</th>
<th>Tools</th>
</tr>
</thead>
<tbody>
<tr *ngFor = "let data of linksArray">
<td>{{ data.Transfers}}</td>
<td>{{ data.Tools}}</td>
</tr>
</tbody>
</table>
What I would like to achieve is that the columns Transfers and Tools get filled with data that uses the corresponding keywords in my JSON file. And here it is
[{"Type":"Transfers","Name":"1","Hyperlink":"#"}, {"Type":"Transfers","Name":"2","Hyperlink":"#"},
{"Type":"Tools","Name":"1","Hyperlink":"#"}, {"Type":"Tools","Name":"2","Hyperlink":"#"}]
The array gets loaded by using this in my .ts file
this.http.get('../../assets/templatefiles/links.json').subscribe(data => {this.linksArray = data as
any [];
console.log(this.linksArray);
},
(err: HttpErrorResponse) => {
console.log (err.message);
}
);
So far all looks good, I see the array popping up in console, but then look at the table and am confused
I would have expected the entries in the 2nd column to start in the first cell. Instead they start in the 3rd? What am I missing here? Been marveling for quite a while now :)
https://stackblitz.com/edit/angular-ivy-hvcyfq
To get this
Transfers Tools
1 10
2 20
You want code roughly like this
<hello name="{{ name }}"></hello>
<table class="table table-sm table-bordered">
<thead>
<tr>
<th>Transfers</th>
<th>Tools</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of linksArray">
<td>{{data.Transfers.Name}}</td>
<td>{{data.Tools.Name}}</td>
</tr>
</tbody>
</table>
And, this is the main bit, json roughly like this
linksArray = [
{
Transfers: {
Name:"1",
Hyperlink:"#"
},
Tools: {
Name:"10",
Hyperlink:"#"
}
},
{
Transfers: {
Name:"2",
Hyperlink:"#"
},
Tools: {
Name:"20",
Hyperlink:"#"
}
},
Your existing json looks like this, where the '{' represents one row
[
{
"Type":"Transfers",
"Name":"1",
"Hyperlink":"#"
},
{
"Type":"Transfers",
"Name":"2",
"Hyperlink":"#"
},
{
"Type":"Tools",
"Name":"1",
"Hyperlink":"#"
},
{
"Type":"Tools",
"Name":"2",
"Hyperlink":"#"
}
]
I get the following JSON represantion from a web service
{
"STAT": {
"Total": 216,
"Average": 2.9722222222222223
},
"PPRP": {
"Total": 31494,
"Average": 19.884390677589384
}
}
Within my component I have the following code:
rawOverview: any
ngOnInit() {
this.service.getPlcOverview().subscribe(
data => {
this.rawOverview = JSON.parse(JSON.stringify(data))
},
err => console.error(err),
() => console.log('done loading foods')
);
}
How can I access PPRP and STAT with template syntax?
I tried the following:
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Tels with acks</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">PPRP</th>
<td>{{rawOverview.PPRP?.Average}}</td>
</tr>
</tbody>
</table>
but I get an error in the console.
ERROR TypeError: Cannot read property 'PPRP' of undefined
Is it possible to access a JSON object in this way?
Or do I have to create known objects which can access the values?
At the moment, because rawOverview is set asynchronously, it starts life undefined, which is causing your error.
If you move the question mark, it will perform a null safe check, which will prevent the error
<td>{{rawOverview?.PPRP?.Average}}</td>
More on that here
Yes you can and should access it like this.
in the HTML just do something like this:
<tr>
<th scope="row">PPRP</th>
<td>{{rawOverview.PPRP?.Average}}</td>
</tr>
<tr>
<th scope="row">STAT</th>
<td>{{rawOverview.STAT?.Average}}</td>
</tr>
I'm new in thymeleaf. i'm stuck in one place where i need to iterate through a list of strings which is present inside another list. For example, ihave a json like this :
{
"_id" : ObjectId("54e1865423asgj086"),
"Name" : "Carbon Utility",
"Modified In " : "DEC 5th",
"Imported" : "N",
"Classification" : "Functional SW delivery",
"Type Designation" : "Heavy Use",
"StateList" : [
{
"name" : "Create",
"currentStatus" : "False",
"stateDuration" : "336264 "
},
{
"name" : "Implement",
"currentStatus" : "False",
"stateDuration" : "1393827 "
},
{
"name" : "RampUp",
"currentStatus" : "False",
"stateDuration" : "34 "
},
]
}
in my Controller, i'm adding this to a object.
#RequestMapping(value = "/Search1", method = RequestMethod.GET)
public String showEntity( #RequestParam("type") String typeNameid,Model model,HttpSession session) {
------ my other stuffs--------
---- here i'm getting data from other html and spliting to add to model----
model.addAttribute("resultSourceDbObject",migrationSourceDataBean.getResultSourceDbObject());
return "wipdm/Display";
}
Now, in my html page. I'm able to print the id,name and type desgination. but i'm stuck in iterating through the statelist. For each statelist i have to create a separate subfolder inside a table and need to display the name,status and duration. I'm trying this but not working.
<table id="example-advanced" class="table table-striped table-bordered table-hover" style=" font-size:1.1em;">
<thead class="dark-border-bottom">
<tr>
<th style="text-align:center"> Key</th>
<th style="text-align:center">Values</th>
</tr>
</thead>
<tbody>
<tr data-tt-id='1'><td><span class="file"> Type</span></td><td><span th:text="${resultSourceDbObject.getString('Type Designation')}"></span> </td></tr>
<tr data-tt-id='1'><td><span class="file"> Name</span></td><td><span th:text="${resultSourceDbObject.getString('Name')}"></span> </td></tr>
<tr data-tt-id='1'><td><span class="file"> id</span></td><td><span th:text="${resultSourceDbObject.getString('_id')}"></span> </td></tr>
<tr data-tt-id='2'><td><span class='folder'>Statelist</span></td><td></td></tr>
<tr data-tt-id='2-1' data-tt-parent-id='2' th:each="relresult : ${resultSourceDbObject.getString('StateList')}"><td><span class='folder' th:text="Relationship" >Relationship</span></td><td>Folder</td></tr>
<tr data-tt-id='2-1-1' data-tt-parent-id='2-1'><td><span class='file' >name</span></td><td th:text="${relresult.getString('name')}">Release</td></tr>
<tr data-tt-id='2-1-2' data-tt-parent-id='2-1'><td><span class='file'>currentstatus</span></td><td th:text="${relresult.getString('currentStatus')}">132456424</td></tr>
<tr data-tt-id='2-1-3' data-tt-parent-id='2-1'><td><span class='file'>Stateduration</span></td><td th:text="${relresult.getString('stateDuration')}">16572464</td></tr>
</tbody>
</table>
Can anybody tell me where i'm going wrong and how to acheive this.? Thanks in advance.
I'm not sure exactly what type of object migrationSourceDataBean.getResultSourceDbObject() is returning, but resultSourceDbObject.getString('StateList') won't be returning what you need. (I guess it's just giving you the JSON?)
Assuming it's something similar to JSONObject you should be calling getJSONArray() (or similar) which will give you the nested list which you can then iterate over.
I have been trying and failing to iterate through some JSON Data with Mustache JS in order to populate a table which looks like:
{
"Pay":[
[
"Regular Hours",
"$75.00",
"$75.00"
]
],
"Earnings":[
[
"Regular Earnings",
"$2,277.00",
"$1,200.00"
],
[
"Non Tax Vacation Pay",
"$0.00",
"$50.80"
]
],
"Deductions":[
[
"Other Deduction 5",
"$0.00",
"$50.00"
]
]
}
How would I iterate using Mustache JS in order to have every inner array as rows and the outer array as headers like this:
<tr>
<th colspan="4">Pay</th>
</tr>
<tr>
<td>Regular Hours</td>
<td>75</td>
<td>75</td>
</tr>
<!-- Etc. -->
Any help would be greatly appreciated
This issue has made me consider switching over to handlebars to avoid the need for hacky code. The data being passed in is the JSON input from the original question. This function will format the data into key value pairs, after which the data is rendered by the Mustache template.
function (data) {
var payslipList = JSON.parse(data.d);
formattedData = { 'entries': [] };
for (var property in payslipList) {
if (payslipList.hasOwnProperty(property)) {
formattedData['entries'].push({
'key': property,
'value': payslipList[property]
});
}
}
var tablePayslip = $("#tblPayDetails tbody");
$.each(formattedData, function (id, payslip) {
var template = $('#renderPaystub').html();
var html = Mustache.render(template, payslip);
tablePayslip.append(html);
});
The template to access the key value pairs would look something like this:
<script type="text/template" id="renderPaystub">
{{#.}}
{{#.}}
<tr>
<th colspan="3">{{key}}</th>
</tr>
{{/.}}
{{#value}}
<tr>
{{#.}}<td>{{.}}</td>{{/.}}
</tr>
{{/value}}
{{/.}}
</script>
This template is fairly ugly and ambiguous, if there is a better method to achieve this, feel free to let me know.