Retrieve Firebase database specific value depending on key with angular 5 - javascript

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

Laravel 8 & Chart Js - fetching data not working in 'index' page, but works in other urls

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')) }}

How can I succssefully acces an Global Variable from PHP in HTML

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!

Ionic 3 break data and show or angular trunk option

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>

Dynamic add plus to each row in typescript

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.

Angular 4 *ngFor, ngx-pipes get name of top-level key

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

Categories

Resources