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.
Related
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
What I have is this in my HTML code:
<table id="example" class="table table-striped">
<thead>
<tr>
<th scope="col">Index</th>
<th scope="col">Col2</th>
<th scope="col">Col3</th>
<th scope="col">Col4</th>
</tr>
</thead>
<tbody>
{% for item in rows %}
<tr>
<td><button formtarget="_blank"
name="input" type="submit"
formaction="/get"
value={{item[0]}}>{{item[0]}}</button></td>
<td>{{ item[1] }}</td>
<td>{{ item[2] }}</td>
<td>{{ item[3] }}</td>
</tr>
{% endfor %}
Notice that I am adding button as type 'submit' to send item[0] which is essentially the row id of a sqlite3 table back to Flask server view function '/get'. My Flask '/get' function is as follows:
#app.route('/get', methods =['GET', 'POST'])
def getfmhtml():
input = str()
if request.method == 'POST':
input = int(request.form['graph'])
return render_template('index.html', input = input)
When I click the button in a row in Index column however, no value item[0] is posted to the server (i.e. nothing happens, no error either). I want to know what's the problem in my code. I want to Post the row id from index column back to my Flask server.
posting below as per suggestion from Gnudiff that worked. Enclosing button in form tag post the value back to the server:
{% for item in rows %}
<tr>
<td><form action="/get" method="POST"><button formtarget="_blank"
name="input" type="submit"
formaction="/get"
value={{item[0]}}>{{item[0]}}</button>
</form>
</td>
<td>{{ item[1] }}</td>
<td>{{ item[2] }}</td>
<td>{{ item[3] }}</td>
</tr>
{% endfor %}
I want to fetch the data from a table which is in database and then display it in tabular format in my webpage. Only the html column name is being shown but not the data from the database table. Can anyone please help me out with this?
My codes:
views.py:
def display_majorheads(request):
outputs = ProcessedOutputs.objects.all()
be_year = 0
context = {
'processed_outputs':outputs,
'be_year':be_year,
}
return render(request, 'website/mhead.html', context )
mhead.html:
<table class="table table-striped">
<tr>
<th>MajorHead</th>
<th>BeSalary</th>
<th>BeGiaSalary</th>
<th>BeOther</th>
<th>BeTotal</th>
<th>BeNextyrSalary</th>
<th>BeNextyrGiaSalary</th>
<th>BeNextyrOthrs</th>
<th>BeNextyrTotal</th>
</tr>
{% for processed_outputs in outputs %}
<tr>
<td>{{ processed_outputs.major_cd }}</td>
<td>{{ processed_outputs.be_salary }}</td>
<td>{{ processed_outputs.be_gia_salary }}</td>
<td>{{ processed_outputs.be_other }}</td>
<td>{{ processed_outputs.be_total }}</td>
<td>{{ processed_outputs.be_nextyr_salary }}</td>
<td>{{ processed_outputs.be_nextyr_gia_salary }}</td>
<td>{{ processed_outputs.be_nextyr_others }}</td>
<td>{{ processed_outputs.be_nextyr_total }}</td>
</tr>
{% endfor %}
</table>
almost there!
{% for processed_outputs in outputs %}
has to be:
{% for outputs in processed_outputs %}
{{ outputs.major_cd }}
...
...
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>
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.