Why I cannot see data in hierarchy table? - html

I'm trying to create a hierarchical table in Vue.js, this should be such a base therefore. However, I don't want to show the table with the data. The error would be here:
<tr v-if="item.childrenVisible" v-for="child in item.children" :key="child.id">
If I remove this whole section, I can see the table
HTML:
<table>
<thead>
<tr>
<th>Name</th>
<th>Parent</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.parent }}</td>
<td>
<button #click="toggleChildren(item)">Toggle Children</button>
</td>
<tr v-if="item.childrenVisible" v-for="child in item.children" :key="child.id">
<td>{{ child.name }}</td>
<td>{{ child.parent }}</td>
<td>
<button #click="toggleChildren(child)">Toggle Children</button>
</td>
</tr>
</tr>
</tbody>
</table>
</div>
Vue.js script and my whole mini-project:
https://jsfiddle.net/barabas/jrcufeah/


The problem was you cannot use v-if and v-for on the same node like I did so this is how I fix it
<template v-if="item.childrenVisible">
<tr v-for="child in item.children" :key="child.id">
<td>{{ child.name }}</td>
<td>{{ child.parent }}</td>
<td>
<button #click="toggleChildren(child)">Toggle Children</button>
</td>
</tr>
</template>
I split up the v-for and v-if to two different node template and tr

Related

How to convert JSON String to HTML Table in Flask?

I am trying to convert json to html table but getting error UndefinedError: 'unicode object' has no attribute 'items'.
I am getting below json from response and I am storing it into d5,
['{"pf":"K"', '"users":1', '"evennts":1}', '{"pf":"A"', '"users":7', '"evennts":7}', '{"pf":"I"', '"users":3', '"evennts":3}']
follwing is my code,
finalJson = json.dumps(d5)
table_data = (json2html.convert(json = finalJson))
return render_template_string('''
<table>
<tr>
<td> PF </td>
<td> users </td>
<td> events </td>
</tr>
{% for pf, users,events in table_data.items() %}
<tr>
<td>{{ pf }}</td>
<td>{{ users }}</td>
<td>{{ events }}</td>
</tr>
{% endfor %}
</table>
''', table_data=table_data)
I want to convert that json into html table like,
pf
users
events
K
1
1
I
3
3
A
7
7

As I have checked above, try this
d5 = ['{"pf":"K", "users":1, "events":1},{"pf":"A", "users":7, "events":7},{"pf":"I", "users":3, "events":3}']
# convert spark json array result to a list.
finalJson = json.loads("[" + d5[0] + "]")
return render_template_string('''
<style>
table, th, td {
border: 1px solid black;
}
table {
width:80%;
border-collapse: collapse;
}
td {
text-align: center
}
th:first-child, td:first-child {
text-align: left
}
th:last-child, td:last-child {
text-align: right
}
</style>
<table>
<tr>
<th> PF </th>
<th> users </th>
<th> events </th>
</tr>
{% for row in table_data %}
<tr>
<td>{{ row['pf'] }}</td>
<td>{{ row['users'] }}</td>
<td>{{ row['events'] }}</td>
</tr>
{% endfor %}
</table>
''', table_data=finalJson)
You could also feel free to modify styles to what you want.

d5='[{"pf":"K","users":1,"events":1},{"pf":"A","users":7,"events":7},{"pf":"I","users":3,"events":3}]'
finalJson = json.loads(d5)
return render_template_string('''
<table>
<tr>
<td> PF </td>
<td> users </td>
<td> events </td>
</tr>
{% for pf, users,events in finalJson %}
<tr>
<td>{{ pf }}</td>
<td>{{ users }}</td>
<td>{{ events }}</td>
</tr>
{% endfor %}
</table>
''', finalJson=finalJson)
First, the string d5 should have correct json format.
Second, if you want to covert string to json, you can use json.loads (not dumps)
finalJson is 'List'. So you can iterate it without items() funciton.

Get front matter data of specific pages into table in Jekyll

I want to get some information from the front matter ({{ page.title }} and {{ page.status }}) for some of my site pages into a table on my index page.
How should I do this?
<table>
<tr>
<td>Page title</td> <td>Page status</td>
</tr>
<tr>
<td>{{ page-name-1.title }}</td><td>{{ page-status-1.status }}</td>
</tr>
<tr>
<td>{{ page-name-2.title }}</td><td>{{ page-status-2.status }}</td>
</tr>
</table>

You can get a specific page from the site.pages collection with the Liquid filter where of Jekyll.
Given I have a page foo.md with this front matter:
---
title: foo
status: bar
---
Then this:
<table>
<tr>
<td>Page title</td>
<td>Page status</td>
</tr>
{% assign page_info = site.pages | where: 'name', 'foo.md' %}
<tr>
<td>{{ page_info[0].title }}</td>
<td>{{ page_info[0].status }}</td>
</tr>
</table>
Will render as
<table>
<tr>
<td>Page title</td>
<td>Page status</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</table>
Just repeat it for any page that have an interest for you:
{% assign pages_info = 'foo.md,index.md' | split: ',' %}
<table>
<tr>
<td>Page title</td>
<td>Page status</td>
</tr>
{% for page_name in pages_info %}
{% assign page_info = site.pages | where: 'name', page_name %}
<tr>
<td>{{ page_info[0].title }}</td>
<td>{{ page_info[0].status }}</td>
</tr>
{% endfor %}
</table>

How to create dynamic table in html and angular

I need to present in Html a dynamic table that I don't know what is the template of each row:
Some times it contains 2 columns, sometimes 4...
I need something like this:
<div>
<h1>Angular HTML Table Example</h1>
<table>
<thead>
<tr>
<th>#ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of ItemsArray">
<th>{{ item.id }}</th>
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
<td>{{ item.phone}}</td>
<td>{{ item.address }}</td>
</tr>
</tbody>
</table>
</div
And instead of:
<tr *ngFor="let item of ItemsArray">
<th>{{ item.id }}</th>
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
<td>{{ item.phone}}</td>
<td>{{ item.address }}</td></tr>
somethong like:
<tr *ngFor="let item of ItemsArray">
<ngFor="let property of item.structure>
<td>{{ property }}</td>
Do you have any advice for me?
Thanks

You can get keys of list item by using below code and render header column
Object.keys(list);
This is stackblitz code
You can see required code in Product component file. I hope it works for you scenario

This is the solution:
<tbody class="f">
<ng-container *ngFor="let message of this.allMessages | filter:term | paginate: config ;let i = index">
<tr >
<td>{{ i+1 }}</td>
<ng-container *ngFor = "let j of this.messageIndex">
<td>{{message.data[0][j]}}</td>
</ng-container>
</tr>
</ng-container>
</tbody>

How to break column as title in a HTML table

I want do report with HTML and put one column as title and supress repetition. I'm using Laravel 5.8.
This is my view code.
<div class="container">
<div class="table-responsive">
<div class="table table-striped table-bordered">
<table>
<thead>
<tr>
<th>Leito</th>
<th>Nº Atendimento</th>
<th>Dt. Atendimento</th>
<th>Paciente</th>
<th>Idade</th>
<th>CID Principal</th>
<th>CID</th>
<th>Médico</th>
<th>Dias internado</th>
<th>Observação</th>
</tr>
</thead>
<tbody>
#foreach($analytic as $patient)
<tr><td colspan="11"><strong>Setor: </strong>{{ $patient->setor }}</td></tr>
<tr class="{{ $patient->corlinha }}">
<td>{{ $patient->leito }}</td>
<td>{{ $patient->atendimento }}</td>
<td>{{ $patient->dtatendimento }}</td>
<td>{{ $patient->paciente }}</td>
<td>{{ $patient->idade }}</td>
<td>{{ $patient->cidp }}</td>
<td>{{ $patient->cid }}</td>
<td>{{ $patient->medico }}</td>
<td>{{ $patient->dias }}</td>
<td>{{ $patient->observacao }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
And this is my result:
Result
When "Setor" is same i need agroup them.
I need something like this:
Result that i need
Thank´s

In your case you need to groupBy your collection. I am giving an example.
Controller Code:
public function index()
{
$$analytic = Model::all()->groupBy('setor');
return view('view', compact('analytic '));
}
In blade your table will look like something:
<table>
#foreach ($analytic as $key => $data)
<tr>
<th colspan="10">{{ $key }}</th>
</tr>
#foreach ($data as $patient)
<tr>
<td>{{ $patient->leito }}</td>
<td>{{ $patient->atendimento }}</td>
<td>{{ $patient->dtatendimento }}</td>
<td>{{ $patient->paciente }}</td>
...........
...........
</tr>
#endforeach
#endforeach
</table>
Hope you can now work around to get your desired result. Read Laravel documentation about collection groupBy here.

Issue with html table in laravel 5

I have a table in a blade file.
<table style="width:80%" border="1">
<tr>
<th>Code</th>
<th>Type</th>
<th>Issue</th>
<th>Entry Type</th>
<th>Value</th>
</tr>
<tr>
#foreach($issues as $issue)
<td>{{ $issue->code }}</td>
<td>{{ $issue->type }}</td>
<td>{{ $issue->issue }}</td>
<td>{{ $issue->entry_type }}</td>
<td>{{ $issue->value }}</td>
#endforeach
</tr>
</table>
However, it dispays like this:
Code Type Issue Entry Type Value
ABC RMK UDID 67 list ABC-U67 ABC RMK UDID 43 list ABC-U43
<
It's not only displaying two record across one row but also displaying a left angle bracket which I can't find in the code. Any help would be appreciated. I am new at Laravel.

There is a problem with your html, not laravel.
The <tr> tag should be in the foreach.
Here:
#foreach($issues as $issue)
<tr>
<td>{{ $issue->code }}</td>
<td>{{ $issue->type }}</td>
<td>{{ $issue->issue }}</td>
<td>{{ $issue->entry_type }}</td>
<td>{{ $issue->value }}</td>
</tr>
#endforeach

It should be like
<table style="width:80%" border="1">
<tr>
<th>Code</th>
<th>Type</th>
<th>Issue</th>
<th>Entry Type</th>
<th>Value</th>
</tr>
#foreach($issues as $issue)
<tr>
<td>{{ $issue->code }}</td>
<td>{{ $issue->type }}</td>
<td>{{ $issue->issue }}</td>
<td>{{ $issue->entry_type }}</td>
<td>{{ $issue->value }}</td>
</tr>
#endforeach
</table>