as the title says I build a CRUD application using Angular 5 and CRUD works just fine but now I need to retrieve a specific post data with advanced routing so the url should be something like :
https://example.com/blog/howtoDoSomething
and the page should contain this post details like name, content , image and so on .
I tried
details.component.ts
this.sub = this.route.params.subscribe(params => {
this.key = params['$key'];
});
details.component.html
<p>
this page about {{ $key }}
</p>
the above code worked fine with angular 4 with some difference of course and I used a json file not Firebase .
I also tried this one :
details.component.ts
var x = this.blogService.getData();
x.snapshotChanges().subscribe(item => {
this.blogList = [];
item.forEach(element => {
var y = element.payload.toJSON();
y["$key"] = element.key;
this.blogList.push(y as Blog);
});
});
details.component.html
<div *ngFor="let blog of blogList">
{{blog[$key].title}}
</div>
this one if I use blog alone like :
<div *ngFor="let blog of blogList">
{{blog}}
</div>
this retrieves the whole database as as
[object object] repeated
thanks in advance .
// user-service.ts
public getUser(userId: string) {
return this.afs.doc('users/' + userId).valueChanges();
)
// user-component.ts
// Get userId from route
this.user$ = this.userService.getUser(userId);
// user-component.html
<div *ngIf="user$ | async as user">
{{user | json}}
</div>
Related
I am using Metronic 8 as a dashboard theme for the project.
I created a blade file at views/partials/widgets/charts/LFChart.blade.php (That's where the theme recommends to create widgets)
I also created a controller ChartsController to manage all chart's logic and return the variables to the view using compact().
The javascript file for chartjs is under resources/assets/extended/js/custom/widgets which the theme already have sample codes of charts.
Now for the issue: I want to display the chart in the homepage, but it always shows me variable undefined: items error when the route is like this:
Route::get('/', [ChartsController::class, 'LF']);
When I change the route to this and navigate to the url localhost/get it works as expected:
Route::get('/get', [ChartsController::class, 'LF']);
The chartController:
public function LF()
{
$data = LostFound::select('id', 'handover')
->get()
->groupBy(function($data) {
return $data['handover'];
});
$items = [];
$handoverCounts = [];
foreach( $data as $item => $values ) {
$items[] = $item;
$handoverCounts[] = count($values);
}
// I tried changing the view to 'pages.index' which is the homepage but still errors
return view('partials.widgets.charts.lost_found_handovers', compact('items', 'handoverCounts'));
}
This is how I'm fetching the data to chartjs in js file:
var ydata = JSON.parse('{!! json_encode($items) !!}');
var xdata = JSON.parse('{!! json_encode($handoverCounts) !!}');
I also tried adding the LF() function to the PageController which is responsible for the index.blade.php aka homepage.
Finally as the theme recommends, this is how I call the widget to the index.blade:
{{ theme()->getView('partials/widgets/charts/lost_found_handovers') }}
I also tried:
{{ theme()->getView('partials/widgets/charts/lost_found_handovers', compact('items', 'handoverCounts')) }}
And this but returns a string instead of the actual data:
{{ theme()->getView('partials/widgets/charts/lost_found_handovers', array('items' => 'items', 'handoverCounts' => 'handoverCounts')) }}
Pre Info:
In the PHP I declare a global array ($GLOBALS[]), in it I stow the data for the blade.
On the Blade i have a dropdown. If the dropdown changes, i send via AJAX the value to the Controller.
With the new data i calculate the new information, i want to show on the Blade.
But when I try to get the data in HTML like {{$GLOBALS['MyNumber']}} I only get the initialization value.
<?php
.
.
.
$GLOBALS = array(
'MyNumber' => 1,
'companyCode' => 0
);
class MyClass extends Controller
{
public function getData(){
$GLOBALS['companyCode'] = #$_POST['companyCode'];
if ($GLOBALS['companyCode'] == 902){
$GLOBALS['MyNumber'] = 100; //for the example, I set the data fix
}else{
$GLOBALS['MyNumber'] = 20; //for the example, I set the data fix
}
return response()->json(array('AJAX succses' => $response), 200);
}
.
.
.
In HTML i wanna show an dashboard-card with the new data like this:
I have 4 Cards and 7 Tables with data from SQL.
#section('page_content')
<div class="card #if($GLOBALS['MyNumber'] >95) dashboard-card-success #else card-anger-#endif" id="bkfI">
<div class="dashboard-title">
{{ __('bkf_usage') }} {{ today()->year }}
</div>
<div class="dashboard-content">
<div class="dashboard-number" id="bkf_usage">{{$GLOBALS['MyNumber'] }} %</div>
<div class="dashboard-description"></div>
</div>
</div>
But every time i reload the div (so the color can change) the $GLOBALS['MyNumber'] stays on the init of 1.
But the internal use (if $GLOBALS['companyCode']) works fine. How can i solve this issue? Or can you help me to find a work-around?
Maybe pass all the Vars back via ajax to JS and store tem in an JS variable? So i can still access from HTML to them?
Thank You!
I am fetching some data from api, but their are some wordings, which are in single string. I need to show them seperately. Here is how it come in console:
And i want to show in my app like this:
This is already showing in other mobile application like this. But i want to know how it will done with ionic angular.
This is how im showing wording .
.ts
this.wording = this.res[0].policywording;
.html
<div *ngIf="wording">{{wording}}</div>
and the output is same as in console which is not in sequence i want to show it like as i attach . I think it is possible by trunk but dont know how ill use it .
You have to break up that data. Something like this:
ts:
this.displayData = [];
if (this.wording) {
const policies = this.wording.split('|').filter(w => w !== '');
this.displayData = [];
policies.forEach((policy) => {
const splited = policy.split('=');
const displayPolicy = {name: splited[0], value: splited[1]};
this.displayData.push(displayPolicy);
});
}
.html:
<div *ngIf="displayData && displayData.length > 0">
<div *ngFor="let policy of displayData">{{policy.name:}} {{policy.value}}</div>
</div>
<div *ngIf="!displayData || displayData.length === 0">No Data available</div>
I'm working on an ionic2 project which pulls data from and API and displays content of the API to the user which works fine.
But the challenge is i want number the rows in the view as the user scroll down . For example if the API return data of lenght 40, i want to number the rows from 1 to 40.
JS
ionViewDidLoad(){
let loader = this.LoadingController.create({
content: 'Loading Test'
});
loader.present().then(()=>{
this.http
.get('http://localhost/scripts/items.php')
.map(res => res.json()).subscribe(data => {
console.log(JSON.stringify(data));
this.store= data;
for(var i=1;i<data.length;i++) {
this.count = i++;
}
});
loader.dismiss();
});
HTML
<div *ngFor="let item of store">
{{count}}. {{item.Item_Name}}
</div>
You can use index provided by *ngFor directive:
<div *ngFor="let item of store; let i = index">
{{i + 1}}. {{item.Item_Name}}
</div>
More info about this in angular docs:
https://angular.io/api/common/NgForOf#local-variables
There is also a bit different syntax, which is probably now recommended (depends on what version you use, but the first one is still working I think):
*ngFor="let item of store; index as i"
Another approach would be to add indicies to the data in http.get callback:
for(var i = 0; i < data.length; i++) {
data[i].index = i + 1;
}
And then:
<div *ngFor="let item of store">
{{item.index}}. {{item.Item_Name}}
</div>
This could be helpful if you need the index not only in the view. In other case I would recommend to use #martin-adámek suggestion.
I'm using the ngx-pipes in my ionic 3 app because I am pulling an object of objects from firebase.
I retrieve my objects and turn it into a variable that I can use on the page:
getEvents() {
this.firebaseDatabase.getEvents.subscribe(data => {
console.log("Events ", data);
this.events = data;
}, error => {
console.log("Events ", error);
});
}
I log the data and it comes back like this:
eventIDHashed_1:
endDateTime:"tomorrow"
location:"somewhere"
roles:
GyyapYhHQDOriruHLvGPKaTOiRp2:"admin"
startDateTime:"today"
title:"Arisss & Nathan"
type:"wedding"
eventIDHashed_2:
endDateTime:"tomorrow"
location:"somewhere"
roles:
GyyapYhHQDOriruHLvGPKaTOiRp2:"admin"
startDateTime:"today"
title:"Jack & Marlana"
type:"wedding"
The way I'm displaying it on the page is a temporary solution, but everything is working fine except the first line. I need to get the event name (the key) where it says eventIDHashed_1 and eventIDHashed_2
<div class="event-container">
<div *ngFor="let event of events | values; let i = index">
<span>{{events[i]}}</span>
<span>{{event.title}}</span>
<span>{{event.location}}</span>
<span>{{event.type}}</span>
<span *ngFor="let role of event.roles | pairs">
<span>{{role[0]}}, {{role[1]}}</span>
</span>
<span>{{event.startDateTime}}</span>
<span>{{event.endDateTime}}</span>
</div>
</div>
I have everything working and am able to retrieve all information, except the actual event ID <span>{{events[i] | keys}}</span> This gives me a list of all of the keys inside of it (endDateTime, location, title, startDateTime...), but I need to get the id of the event eventIDHashed_1 and eventIDHashed_2
After playing with ngx-pipes, I found that I could use the pairs operator fairly simply. I've changed the template from the above to this:
<div *ngFor="let event of events | pairs">
<span>{{event[0]}}</span>
<span>{{event[1].title}}</span>
<span>{{event[1].location}}</span>
<span>{{event[1].type}}</span>
<span *ngFor="let role of event[1].roles | pairs">
<span>{{role[0]}}, {{role[1]}}</span>
</span>
<span>{{event[1].startDateTime}}</span>
<span>{{event[1].endDateTime}}</span>
</div>
ngx-pairs gives me the key (position [0]) and the value (position [1]) of the event