I am trying to bind user_name to Vue from this Laravel Object:
{ "order": [ { "id": 87, "user_id": "2", "user_name": "Mohamed Hassan", "table": 20, "total": 224, "status": 1, "delivered": 0, "paied": 0, "created_at": "2019-09-14 15:04:40", "updated_at": "2019-09-14 15:04:40" } ] }
and this object get from:
{{order.data}}
I also tried with this:
{{order.data['order']['user_name']}}
but it returns null
and this is my Vue template
<li v-for="order in orders">
<div class="col-md-3 col-sm-3 col-xs-3"><div class="notify-img">{{order.data}}</div></div>
<div class="col-md-9 col-sm-9 col-xs-9 pd-l0">
Date:
{{order.created_at}}
<i class="fa fa-dot-circle-o"></i>
<p>Lorem ipsum sit dolor amet consilium.</p>
<p class="time">1 Saat önce</p>
<hr>
</div>
</li>
If I see it properly, then the order is actually an array holding a single object.
You could try:
{{ order.data['order'][0]['user_name'] }}
Related
So, I'm trying to fetch my laravel api and already run php artisan serve. After that the error came out and I'm looking to find solution here but I have no idea what's going on.
The error shown in the console:
Uncaught (in promise) TypeError: Cannot convert undefined or null to object
The API:
{
"message": "List trash and category order by time",
"data": [
{
"id": 1,
"trash_id": 1,
"category_id": 2,
"created_at": "2022-01-01T12:41:43.000000Z",
"updated_at": "2022-01-01T12:41:43.000000Z",
"garbage": {
"id": 1,
"name": "Buku",
"weight": 1,
"created_at": "2022-01-01T12:41:19.000000Z",
"updated_at": "2022-01-01T12:41:19.000000Z"
},
"categories": {
"id": 2,
"name": "Kertas",
"price": 1800
}
}]
}
Index.vue script:
<script>
import axios from "axios";
import { onMounted, ref } from "vue";
export default {
setup() {
// reactive state
let all_trash = ref([]);
onMounted(() => {
// get data from api endpoint
axios
.get("http://127.0.0.1:8000/api/trash")
.then((result) => {
all_trash.value = result.data;
})
.catch((err) => {
console.log(err.response);
});
});
return {
all_trash,
};
},
};
</script>
Index.vue HTML:
<div v-for="(trash, index) in all_trash.data" :key="index">
<div class="card rounded shadow mb-3">
<div class="card-body">
<div class="mx-3">
<h5 class="mb-4">{{ trash.garbage.name }}</h5>
<p>
{{ trash.categories.name }}
<span class="float-end">
<button class="btn" style="color: red">Hapus</button>
</span>
</p>
</div>
</div>
</div>
</div>
Just add a condition that not to render the loop until data is not set. The data from API end point is not available on the initial dom rendered and there is not data in all_trash.data hence the error. Just add a v-if on top of the div and hopefully it should work.
<div v-if=" all_trash.data">
<div v-for="(trash, index) in all_trash.data" :key="index">
<div class="card rounded shadow mb-3">
<div class="card-body">
<div class="mx-3">
<h5 class="mb-4">{{ trash.garbage.name }}</h5>
<p>
{{ trash.categories.name }}
<span class="float-end">
<button class="btn" style="color: red">Hapus</button>
</span>
</p>
</div>
</div>
</div>
</div>
i am trying to get permission all id which is checked by user but unfortunately i am not getting permission ids in proper array format please help me how can i do that ? please my format below thanks.
I want to get permissions ids like this.
{
"_token": "Eo1ByYyiFyrzvTXqqlUUAszTk8AMa8CjC9xpRa0l",
"name": "dfsdfsdf",
"permission": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
}
result of request()->all()
{
"_token": "Eo1ByYyiFyrzvTXqqlUUAszTk8AMa8CjC9xpRa0l",
"name": "dfsdfsdf",
"permission": {
"1": "on",
"2": "on",
"3": "on",
"4": "on",
"5": "on",
"6": "on",
"7": "on",
"8": "on",
"9": "on",
"10": "on",
"11": "on"
}
}
html view
#foreach ($menus as $sub_menu)
#if ($sub_menu->parent_id == $menu->id)
<div class="portlet mb-0">
<div class="portlet-heading bg-light-theme">
<h4 class="portlet-title">
<div class="checkbox">
<input id="{{$sub_menu->name}}" name="permission[{{$sub_menu->id}}]" type="checkbox" class="parent intermediate parent-{{$menu->id}} parentmenu-{{$sub_menu->id}}"
data-id="{{$menu->id}}" data-sub="{{$sub_menu->id}}" >
<label for="{{$sub_menu->name}}">
<span class="text-black">{{$sub_menu->name}}</span>
</label>
</div>
</h4>
<div class="portlet-widgets">
<a data-toggle="collapse" data-parent="#accordion1" href="#UsersRoles" class="text-white">
<i class="ion-minus-round">
</i>
</a>
</div>
<div class="clearfix">
</div>
</div>
<div id="UsersRoles" class="panel-collapse collapse show">
<div class="portlet-body">
#foreach ($menus as $permission)
#if ($permission->parent_id == $sub_menu->id)
<div class="checkbox">
<input id="checkbox{{$permission->id}}" name="permission[{{$permission->id}}]" type="checkbox" class="child parent-{{$menu->id}}"
data-parent-id="{{$menu->id}}" >
<label for="checkbox{{$permission->id}}">
{{$permission->name}}
</label>
</div>
#endif
#endforeach
</div>
</div>
</div>
#endif
#endforeach
You must cycle the permission field, check if the value is "on" and add it to a new variable.
Assuming $r as request().
$veryPermissions = [];
foreach( $r->permission as $permission => $state ) {
if( $state == 'on' ) {
$veryPermissions[] = $permission;
}
}
Now $veryPermissions contains the ids of the permission checked.
NOTE - If you need only the ids of permissions without check if user checked or not, try to use array_keys() function.
Documentation : https://www.php.net/manual/en/function.array-keys.php
:)
array_walk can help us address the issue in an effective way:
$return = [];
array_walk($request->permission, function ($key, $value) use (&$return) {
if ($key == 'on')
array_push($return, $value);
});
//print_r($return);
$request->permission = $return;
Response Json from back-end
{
"INCOME": {
"TOURIST": [{
"vehicleNumber": "TN 47 RG 4567",
"details": [{
"id": 01,
"amount": 100
},{
"id": 02,
"amount": 200
}]
},
{
"vehicleNumber": "TN 47 RG 9876",
"details": [{
"id": 03,
"amount": 300
},{
"id": 04,
"amount": 400
}]
}
]
}
}
is assigned to this.tesTourist = this.objectValue.INCOME.TOURIST;
component.html
<form [formGroup]="accountsForm" autocomplete="off">
<div class="row">
<div *ngFor="let obj of tesTourist">
<div *ngFor="let item of obj.details">
<label class="text-left"> {{obj.vehicleNumber}} :</label>
<input type="text" formControlname="incomeTourist" value="{{item.amount}}">
</div>
</div>
</div>
</form>
component.ts
this.accountsForm = this.fb.group({
incomeTourist:[],
});
Let as take obj.details.length is 2. It displays 2 input box in page with the value amount binded(item.amount). While changing the amount in any one of the input field that could not bind the amount in incomeTourist. It constantly shows null as below.
Result of <pre><code>{{accountsForm?.value | json}}</code></pre>
{
"incomeTourist": null
}
You form structure should be like below.
this.accountsForm = this.fb.group({
testTourist: this.fb.array([]),
});
After that create 2 method to create testTourist and incomeTourist form array.
createTestTourist() {
return this.formBuilder.group({
details: this.fb.array([])
});
}
createDetails() {
return this.formBuilder.group({
amount: [],
vehicleNumber: []
});
}
And after that loop over the testTourist object in ngOnInt method.
this.testTourists.forEach(testTourist => {
const fb = this.createTestTourist();
testTourist.details.forEach((detail, i) => {
const cfb = this.createDetails();
cfb.get('amount').setValue(detail.amount);
cfb.get('vehicleNumber').setValue(detail.vehicleNumber);
(fb.controls.details as FormArray).push(cfb);
});
(this.accountsForm.get('testTourist') as FormArray).push(fb);
});
after this in html you should write below code.
<form [formGroup]="accountsForm" autocomplete="off">
<div class="row">
<div *ngFor="let obj of testTourists; let i= index" formArrayName="testTourist">
<ng-container [formGroupName]="i">
<div *ngFor="let item of obj.details; let j= index" formArrayName="details">
<ng-container [formGroupName]="j">
<label class="text-left"> {{item.vehicleNumber}} :</label>
<input type="text" formControlName="amount">
</ng-container>
</div>
</ng-container>
</div>
</div>
</form>
After this if you do any changes it will reflect in form object. You can console the form object.
console.log(this.accountsForm.value)
you will get expect same object structure as you are providing. And you will get updated values.
I have a model that I paginate like this:
$reserve = PropertyCalendar::paginate(1);
return new ReserveResource($reserve);
I also made an API that responds with resource, and in Vue component I'll calling it with axios.get.
public function toArray($request)
{
return parent::toArray($request);
}
Here is the API response:
{
"current_page": 1,
"data": [
{
"id": 1,
"property_id": 1,
"user_id": 1,
"payable_price": 11,
"reserve_start": "2019-03-30 00:00:00",
"reserve_end": "2019-04-01 00:00:00",
"created_at":null,
"updated_at":null
}
],
"first_page_url": "http:\/\/localhost:8000\/api\/reserve?page=1",
"from": 1,
"last_page": 2,
"last_page_url": "http:\/\/localhost:8000\/api\/reserve?page=2",
"next_page_url": "http:\/\/localhost:8000\/api\/reserve?page=2",
"path": "http:\/\/localhost:8000\/api\/reserve",
"per_page": 1,
"prev_page_url": null,
"to": 1,
"total": 2
}
Now I want to know how can I make pagination for it, I can't make it with traditional Laravel pagination as it is in Vue component.
loadReserves() {
axios.get("../api/reserve", {
params: {
commentId: this.comment_id
}
}).then((response) => (this.comments = response.data.data));
},
Now I am showing data but I want to paginate it like what in the API.
If using bootstrap is not a problem for your use case, I'd recommend using this vue plugin.
I am using it myself with great results.
https://github.com/gilbitron/laravel-vue-pagination
This is some example with bootstrap showing how you can use Laravel pagination with Vue.js
Example.
<ul class="pagination">
<li class="page-item" :class="{disabled: response.current_page === 1}">
<a class="page-link" #click="previous">Previous</a>
</li>
<li
v-for="number in response.last_page"
class="page-item"
:class="{active: response.current_page === number}"
>
<a class="page-link" #click="navigateTo(number)">{{ number }}</a>
</li>
<li class="page-item" :class="{disabled: response.current_page === response.last_page}">
<a class="page-link" #click="next">Next</a>
</li>
</ul>
I am using asp.net C# MVC jTemplate binding Announcements collection to a template in my view.
One of the announcement has html string as in its description.
Now the problem is how to render that string as html
my view is like
<textarea id="dashAnnoucement_Template"
data-template-name="dashAnnoucement_Template" class="hidden">
{#foreach $T as Announcement}
<li id='{$T.Announcement$iteration}'>
{#if !$().compare($T.Announcement.Category,
#Convert.ToInt32(UI.Entities.AnnouncementCategory.RichText))}
<div class="card large flipped">
<div class="pic">
{#if $T.Announcement.LinkOff}
{#if $T.Announcement.Image.IsVideo}
<a href="{$T.Announcement.LinkOff.Target}" class="play">
<span>{$T.Announcement.Image.AltText}</span>
<img alt="{$T.Announcement.Image.AltText}"
src="{$T.Announcement.Image.Source}" class="thumb"/>
</a>
{#else}
<a href="{$T.Announcement.LinkOff.Target}">
<img alt="" src="{$T.Announcement.Image.Source}" class="thumb"/>
</a>
{#/if}
{#else}
<img alt="" src="{$T.Announcement.Image.Source}" class="thumb"/>
{#/if}
</div>
<div class="content"><h3>
{#if $T.Announcement.LinkOff}
<a href="{$T.Announcement.LinkOff.Target}"
target="{#if $T.Announcement.LinkOff.IsExternal}_blank{#else}_self{#/if}">
{$T.Announcement.Title}</a>
{#else}
{$T.Announcement.Title}
{#/if}
</h3>
<p>{$T.Announcement.Summary}</p>
</div>
</div>
{#else}
{$T.Announcement.Description}
#*Need to render this as html*#
{#/if}
</li>
{#/for}
</textarea>
jquery code is like
$(Container).empty()
.setTemplateElement(Template)
.processTemplate(announcementsCollection);
My Json Data i.e announcementsCollection is like
[ { "Category": 1, "Title": "White Space Announcement Title", "Description": "", "Summary": "Join us Fri,April 24 in Atlanta,GA to mingle with Solavei members & hear top earner success stories", "Image": { "Source": "http://slvdev.blob.core.windows.net/media/1463/whitespace_1.jpg", "AltText": "", "Target": "", "IsVideo": false }, "Date": "\/Date(-62135596800000)\/", "LinkOff": { "Target": "http://solavei.com/", "Text": "Learn More >", "IsExternal": true } }, { "Category": 1, "Title": "Got Questions?", "Description": "", "Summary": "Access Member Support for information on your phone, your Solavei Membership, and your Solavei Mobile Service.", "Image": { "Source": "http://slvdev.blob.core.windows.net/media/7323/equipment-support-224x168.jpg", "AltText": "", "Target": "", "IsVideo": false }, "Date": "\/Date(-62135596800000)\/", "LinkOff": { "Target": "http://support.solavei.com", "Text": "Learn More >", "IsExternal": true } }, { "Category": 4, "Title": "html", "Description": "<div class=\"imageBox shadowBox\" style=\"float: right; margin: -20px -20px 0px 20px;\"> \t <a target=\"_blank\" href=\"https://support-uat.solavei.com\">\t\t \t\t <img class=\"fullImage\" alt=\"\" src=\"http://slvdev.blob.core.windows.net/media/35985/neon.jpg\" style=\"height:170px\">\t </a> </div>\n<div class=\"contents\"> <h2> <a target=\"_blank\" href=\"https://support-uat.solavei.com\"> Rich text </a> </h2> <p>Access Member Support for information on your phone, your Solavei Membership, and your Solavei Mobile Service.</p> </div>", "Summary": "<div><img src='https://slvdev.blob.core.windows.net/media/35985/neon.jpg' wid/>\n<p>Test Message</p></div>", "Date": "\/Date(-62135596800000)\/" } ]
I know this is an old post but,
First you have to transform your JSon data into Html code and then
use Html.Raw("") to show the code as Html.
#Html.Raw("Your html in here")