I have a firestorm collection with this structure:
USERID {
email: "test#test.com"
name: "John Doe"
roles{
user: true
editor: true
admin: false
}
}
I am able to get this data as a collection and render it in the view.
component.ts:
constructor(private afs: AngularFirestore) {}
this.userCollection = this.afs.collection('users')
this.users = this.userCollection.valueChanges()
component.html
<tr *ngFor="let user of users | async;>
<td>{{ user.firstName }}</td>
<td>{{ user.lastName }}</td>
<td>{{ user.roles }}</td>
<td>{{ user.email }}</td>
<td>{{ user.job }}</td>
</tr>
Everything displays correctly except "roles" which displays as [object Object]
I can get roles to display by changing the line to
{{ user.roles | json }}
but that only displays the raw json data. How can I display the roles that are set to true? Is there a better way to structure my data?
role is object too. i you can get the property like this
<tr *ngFor="let user of users | async;>
<td>{{ user.firstName }}</td>
<td>{{ user.lastName }}</td>
<td>{{ user.roles.user }}</td>
<td>{{ user.email }}</td>
<td>{{ user.job }}</td></tr>
Related
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've been struggling with this for a few days.
I have an associative array, which I want to loop in my view. It works great when looping to create a table, for example.
The thing is, in another view, I am going to need to include some HTML (a button) in the array, that I am going to pass to the view as a JSON. I've tried it like this and it, no success.
$datacol[] = array(
'button' => '<a href="tasks/details/{{ $task->id }}" class="btn btn-sm">
<i class="bookmark big icon" data-toggle="tooltip" data-placement="top" title="Task Details"></i></a>',
'id' => $task->id,
'task_type' => (DB::table('tasktypes')->where('id','=', $task->task_type_id)->value('task_type')),
'related_block' => (DB::table('chapters')->where('id','=', $task->related_block)->value('description')),
'assigned_to' => (DB::table('users')->where('id','=', $task->assigned_to)->value('display_name')),
'time' => (DB::table('task_interactions')->where('task_id','=', $task->id)->pluck('task_time')->sum()),
'start_date' => (DB::table('task_interactions')->where('task_id','=', $task->id)->where('status','=','In Progress')->pluck('created_at')->first()),
'end_date' => (DB::table('task_interactions')->where('task_id','=', $task->id)->where('status','=','Finished')->pluck('created_at')->first()),
'status' => (DB::table('tasks')->where('id','=', $task->id)->value('status')),
'comments' => (DB::table('tasks')->where('id','=', $task->id)->value('comments'))
);
Does anyone knows a way of passing HTML inside the array and make sure that the array is rendered in the view.
<tbody>
#foreach($datacol as $d)
<tr>
<td>{{ $d['button'] }}</td>
<td>{{ $d['id'] }}</td>
<td>{{ $d['task_type'] }} - {{ $d['related_block'] }}</td>
<td>{{ $d['assigned_to'] }}</td>
<td>{{ $d['time'] }}</td>
<td>{{ $d['start_date'] }}</td>
<td>{{ $d['end_date'] }}</td>
<td>{{ $d['status'] }}</td>
<td>{{ $d['comments'] }}</td>
</tr>
#endforeach
</tbody>
Thanks in advance
Change your array like this you need to give proper html string for button since it will not further parsed by blade. In href you are using blade ({{}}) to append $task->id, That's why it will not append proper id to the url. you need to use (.) to concatenate id to url.
$datacol[] = array(
'button' => '<a href="tasks/details/'.$task->id.'" class="btn btn-sm">
<i class="bookmark big icon" data-toggle="tooltip" data-placement="top" title="Task Details"></i></a>',
'id' => $task->id,
// other stuff
);
And then in view render button using {!! $html !!}
<tbody>
#foreach($datacol as $d)
<tr>
<td>{!!$d['button'] !!}</td>
<td>{{ $d['id'] }}</td>
<td>{{ $d['task_type'] }} - {{ $d['related_block'] }}</td>
<td>{{ $d['assigned_to'] }}</td>
<td>{{ $d['time'] }}</td>
<td>{{ $d['start_date'] }}</td>
<td>{{ $d['end_date'] }}</td>
<td>{{ $d['status'] }}</td>
<td>{{ $d['comments'] }}</td>
</tr>
#endforeach
</tbody>
I hope it will help :)
Remove the button key-value pair completely from the PHP code and render the markup in the view.
You can generate the <a> tag in the view, only using the id you passed ({{ $id }}):
<a href="tasks/details/{{ $id }}" class="btn btn-sm">
<i class="bookmark big icon" data-toggle="tooltip" data-placement="top" title="Task Details"></i></a>
No need to mix HTML in your PHP code (considering you're using Laravel, which completely isolates the view from other code).
I am new at using Angular and I was having problems displaying data retrieved from a database. Can someone help me understand why when I use *ngFor on this HTML code only the gets displayed on my html but not the rest of the rows?
This is my HTML file
<table>
<thead>
<tr>
<th>Name</th>
<th>Lastname</th>
<th>Email</th>
<th>Phone</th>
<th>School</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let contact contacts$">
<td>{{ contact.first_name }}</td>
<td>{{ contact.last_name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.phone_number }}</td>
<td>{{ contact.school }}</td>
</tr>
</tbody>
</table>
And this is my component.ts file
import { Component, OnInit } from '#angular/core';
import { ContactService } from "./contacts.service";
import { Router } from '#angular/router';
import { Observable } from 'rxjs/Observable';
import { Contact } from './contact'
#Component({
selector: 'app-contacts',
templateUrl: './contacts.component.html',
styleUrls: ['./contacts.component.css']
})
export class ContactsComponent implements OnInit {
constructor( private router:Router, private contactService: ContactService )
{}
contacts$: Observable<Contact[]>;
ngOnInit() {
this.contacts$ = this.contactService.getContacts();
}
}
I am getting my information from a GET HTTP call and it works fine if I do the *ngFor on a tag but it does not display when i use it on a tag
Here is the code for when I do it on a
<div *ngFor="let contact of contacts$ | async" >
{{contact.first_name}}
</div>
As far as I can see you are missing the of in your *ngFor tr tag.
Your HTML code should be like below
<tbody>
<tr *ngFor="let contact of contacts$"> <!-- adding of to retrive data -->
<td>{{ contact.first_name }}</td>
<td>{{ contact.last_name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.phone_number }}</td>
<td>{{ contact.school }}</td>
</tr>
</tbody>
Hope it helps.
You are not writing correct loop syntax like in this case you missing "of" and also cross check for correct Property Name.
<tbody>
<tr *ngFor="let contact of contacts">
<td>{{ contact.first_name }}</td>
<td>{{ contact.last_name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.phone_number }}</td>
<td>{{ contact.school }}</td>
</tr>
</tbody>
I'm trying to apply filter to multiple fields in a table ,in html code I have a single textbox for searching
<body ng-app="myApp" ng-controller="myController"> <input type="text" placeholder="Search " ng-model="search">
var app = angular.module('myApp', []); app.controller('myController', function($scope) {$scope.employee = [
{ empid: 1, empname: 'saisree', division:'IS',mgr:'A',clientlocation:'PA' },
{ empid: 2, empname: 'poojitha', division:'IS',mgr:'A',clientlocation:'PA' },
{ empid: 3, empname: 'shyam', division:'IS',mgr:'A',clientlocation:'PA'},
{empid: 4, empname: 'shariff', division:'IS',mgr:'A',clientlocation:'PA'},
{empid: 5, empname: 'anvita', division:'GIS',mgr:'B',clientlocation:'AZ'},
{empid: 6, empname: 'poojitha';`division:'Retail',mgr:'C'clientlocation:'UK';];});
<tbody>
<tr ng-repeat="e in employee | filter:search ">
<td>{{ e.empid }}</td>
<td>{{ e.empname }}</td>
<td>{{ e.division }}</td>
<td>{{ e.mgr }}</td>
<td>{{ e.clientlocation }}</td>
</tr>
</tbody>
The user should be able to search from a single textbox by giving empid,empname,division,mgr,clientloaction. please look into this issue.
This is the table that I'm applying filter to, but giving search in the filter applies to all columns at a time!
Try to do this
<label>your input: <input ng-model="search.$"></label> <br>
<tbody>
<tr ng-repeat="e in employee |filter:search:strict ">
<td>{{ e.empid }}</td>
<td>{{ e.empname }}</td>
<td>{{ e.division }}</td>
<td>{{ e.mgr }}</td>
<td>{{ e.clientlocation }}</td>
</tr>
</tbody>
I am fairly new to Angular JS . I have a table like this .
<tr ng-repeat="job in jobs">
<td>{{ job.id }}</td>
<td>{{ job.companyName }}</td>
<td>{{ job.jobRole }}</td>
<td>{{ job.salary }}</td>
<td>{{ job.location }}</td>
<td>{{ job.jobTitle }}</td>
<td>{{ job.industry }}</td>
<td>{{ job.role }}</td>
<td>{{ job.aboutCompany }}</td>
<td>{{ job.natureOfWork }}</td>
<td>{{ job.idealCandidateProfile }}</td>
</tr>
and I am trying to fill it up using this .
function jobController($scope,$http) {
var url="http://52.74.160.253:8080/jobs/";
var LocalData = "data.txt";
$http.get(LocalData).success( function(response) {
$scope.jobs = response;
});
}
Now here is the weird part . I have the JSON data stored both locally and on the server , When i use the locally stored JSON data , it works fine . But when I use the url , I get displayed with an empty table .Both the local and url data are exactly the same .