So I want to show post in data table but there is 2 layer of data, the data it look like this
[
{
created_at":
"id_post":1,
"name":"trying post",
"comment_all":
[
{
"id_user":3,
}
],
So I want to get comment_all, I use this code in blade
#foreach($compalls as $compall )
<tr>
<td>{{ $compall->coment_all->id_user }}</td>
</tr>
#endforeach
but I got this error
Property [id_user] does not exist on this collection instance. (View: directory/file.blade.php)
hope you can help me
Your coment_all is an array. You have to loop through the array to retrieve each id_user:
#foreach ($compalls as $compall)
<tr>
#foreach ($compall->coment_all as $coment)
<td>{{ $coment->id_user }}</td>
#endforeach
</tr>
#endforeach
You need to loop coment_all because it is an array. like the following:
First foreach $compalls and another foreach inside that to get id_user.
#foreach ($compalls as $compall)
<tr>
#foreach ($compall->coment_all as $coment)
<td>{{ $coment->id_user }}</td>
#endforeach
</tr>
#endforeach
Related
I would like to create a table and populate it with data using vue.js and v-for but I don`t know how to access the nested JSON file.
If I simply call {{items}} the data is presented but there is no way i manage to filter it
here is my code:
<template>
<div id="app">
<thead>
</thead>
<tbody>
<table>
<thead>
<tr>
<th>id</th>
<th>press</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.results.downloadable.document_en }}</td>
<td>{{ item.}}</td>
</tr>
</tbody>
</table>
</tbody>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
items:[]
}
},
created() {
axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5`)
.then(response => {
this.items = response.data
})
}
}
</script>
Based on the result of your endpoint you should change your assignment of items to
.then(response => {
this.items = response.data.results
})
And your loop to
<tr v-for="item in items" :key="item.id">
<td>{{ item.id }}</td>
<!-- as downloadable is an array, see update below etc. -->
</tr>
But be aware - if you assign the data.results directly you will lose the so called "paginator" information that also contains the link to load more.
So another option would be to assign
this.items = response.data
HOWEVER, be aware that you should then define items in your data as null or empty object (not array, as this would be false)
And then change your loop to something like this (it's now looping in item.results)
<tbody v-if="items && items.results">
<tr v-for="item in items.results" :key="item.id">
<td>{{ item.id }}</td>
<!-- as downloadable is an array - see Update below etc. -->
</tr>
</tbody>
This approach would allow you to show the total count via items.count for example
UPDATE:
Actually downloadable is an array! I can only assume what you actually want to achieve to here. I've created a jsfiddle to showcase it: https://jsfiddle.net/v73xe4m5/1/
The main thing you probably want to do is filter the entry to only show entries where downloadable contains a document_en.
<tr v-for="item in items.results" :key="item.id">
<td>{{ item.id }}</td>
<td>
<div class="downloads">
<span
v-for="downloadable in item.downloadable.filter(d => !!d.document_en)"
:key="downloadable.id"
>{{ downloadable.document_en.file }}</span>
</div>
</td>
</tr>
I'm not familiar with that endpoint / api - so I don't know if it might return more than one relevant document per item.
As you can see I used a second v-for loop inside the <td> in order to go through all downloadable entries. Before doing so, they are filtered, so only entries that actually have a document_en value are shown. You can adapt this as you want.
Hope that helps!
this is the correct form to get the array from the json and save to this.items
this.items = response.data.results
I encourage you to always console.log(response) after api call , and access data according to the structure of the api results
I create an Object and use ngFor to loop through it and create a table. I would like to somehow incorporate mailto links if possible.
I have this finalResults object that looks something like this:
[
{key: 'example#example.com', value: 'message'}
]
Where message is something like
"Please contact the Login Team for help."
I would like to make Login Team a mailto link.
I have already tried making the message like this
Please contact the Login Team for help.
But on the webpage it just displayed that exactly. There was no link.
I use ngFor to loop through my object and make a table.
< <tr>
<th *ngFor="let col of displayedColumns">
{{ col }}
</th>
</tr>
<tr *ngFor="let item of finalResults">
<td>{{ item.key }}</td>
<td>{{ item.value }}</td>
</tr>
<tr></tr>
</table>
Is there some way to do this?
If you want to keep your text as html text then consider using innerHTML binding:
ts
finalResults = [
{
key: 'example#example.com',
value: 'Please contact the Login Team for help.'
}
];
html
<td [innerHTML]="item.value"></td>
Ng-run Example
In component declare
email: string = 'mailto:misesasd#gmail.com'
in template:
<a [href]="email">misesasd#gmail.com</a>
array:
<tr *ngFor="let item of finalResults">
<td><a [href]="item.key">{{item.key}}</a></td>
<td>{{ item.value }}</td>
</tr>
or:
<tr *ngFor="let item of finalResults">
<td>{{item.key}}</td>
<td>{{ item.value }}</td>
</tr>
<tr *ngFor="let item of finalResults">
<td>{{ item.value }}</td>
</tr>
Here is the Migration file, I have stored two numbers as json in mysql database, ["1234","4568"].
like this the O/P
I am getting is "[\"1234\", \"5678\"]" but I need to print 1234,5678
public function up()
{
Schema::create('store', function (Blueprint $table) {
$table->increments('id');
$table->json('store_numbers');
});
}
//blade view
#foreach($stores as $store)
<tr>
<td>{{ $store->store_id }}</td>
<td>{{ json_encode($store->store_numbers)}}</td>
</tr>
#endforeach
Try this:
#foreach($stores as $store)
<tr>
<td>{{ $store->store_id }}</td>
#php $store_numbers= json_decode($store->store_numbers); #endphp
#foreach($store_numbers as $store_number)
<td>
{{$store_number}}
</td>
#endforeach
</tr>
#endforeach
I want to display my Json data that return from PHP file as like this:
"{\"success\":true,\"message\":\"Transaction history found.\",\"user_transactions\":[{\"user_id\":\"4\",\"amount_charged\":\"4.00\",\"amount_transferred\":\"14400.00\",\"app_rate\":\"3600.00\",\"charged_currency\":\"USD\",\"beneficiary_phone\":\"256775542757\",\"beneficiary_first_name\":\"Sapkota\",\"beneficiary_last_name\":\"Suresh\",\"beneficiary_country\":\"UG\",\"transferred_currency\":\"UGX\",\"transaction_status\":\"Delivered\",\"order_id\":\"259\",\"created_date\":\"2017-07-25 13:35:48\",\"last_modified_date\":\"2017-07-25 13:35:48\"},{\"user_id\":\"4\",\"amount_charged\":\"5.00\",\"amount_transferred\":\"18000.00\",\"app_rate\":\"3600.00\",\"charged_currency\":\"USD\",\"beneficiary_phone\":\"256775542757\",\"beneficiary_first_name\":\"Sapkota\",\"beneficiary_last_name\":\"Suresh\",\"beneficiary_country\":\"UG\",\"transferred_currency\":\"UGX\",\"transaction_status\":\"Delivered\",\"order_id\":\"258\",\"created_date\":\"2017-07-25 06:23:05\",\"last_modified_date\":\"2017-07-25 06:23:05\"}]}"
Which is fetch using Get as like:
$http.get("clients.php").then(function (response) {
$scope.response = response;
$scope.results = JSON.parse(response.data);
console.log($scope.results);
}
The problem is that, don't get any result in console .log & nothing in table row which I have write in this way. So, anybody please help me.
<table>
<tr ng-repeat="result in results.user_transactions">
<td>{{ result.beneficiary_first_name}}</td>
<td>{{ result.transaction_status }}</td>
</tr>
</table>
You need to parse the response as it is string.
$http.get("clients.php").then(function (response) {
$scope.response = response;
$scope.results = JSON.parse(response.data);//Parsing string to JSON
console.log($scope.results);
}
<table>
<tr ng-repeat="result in results.user_transaactions">
<td>{{ res.beneficiary_first_name}}</td>//No need of using index of array
<td>{{ res.transaction_status }}</td>
</tr>
</table>
First you have to parse your string result to JSON using JSON.parse().
$scope.results = JSON.parse(response.data);
Also there is another issue in your html
<table>
<tr ng-repeat="result in results.user_transactions">
<td>{{ result.beneficiary_first_name}}</td>
<td>{{ result.transaction_status }}</td>
</tr>
</table>
Working Demo
I'm working on coupons project, and i want to display to the client all the coupons that available to purchase.
When i click on the button that call to the function "getAllCoupons()" it works and it returns the results in JSON, but when i want to Insert the results into the table with ng-repeat it displays only if the function returns more than one coupon, if there is only one coupon the ng-repeat don't displays nothing.
This is my controller
angular.module('companyApp', []);
angular.module('companyApp').controller('companyController',
function($rootScope, $scope, $http) {
$scope.getAllCoupons = function() {
$http.get("rest/CompanyService/getAllCoupon").success(
function(response) {
$scope.allCoupons = response.coupon;
});
This is my HTML
<div ng-app="companyApp" ng-controller="companyController">
<button class="tablinks" ng-click="getAllCoupons()" id="getAll">Get all coupons</button>
<table align="center" class="table table-striped" style="width: 900px;">
<thead>
<tr>
<th> Id </th>
<th>Coupon Title</th>
<th>Amount</th>
<th>Start Date</th>
<th>End Date</th>
<th>Price</th>
<th>Message</th>
<th>Coupon Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in allCoupons">
<td>{{ x.id }}</td>
<td>{{ x.title }}</td>
<td>{{ x.amount }}</td>
<td>{{ x.startDate }}</td>
<td>{{ x.endDate }}</td>
<td>{{ x.price }}</td>
<td>{{ x.message }}</td>
<td>{{ x.type }}</td>
</tr>
</tbody>
</table>
</div>
But if i write it without the ng-repeat it works and i get it in JSON:
<div ng-app="companyApp" ng-controller="companyController">
<button class="tablinks" ng-click="getAllCoupons()" id="getAll">Get all coupons</button>
{{ allCoupons }}
</div>
The response for single coupon is:
{"coupon":{"amount":"149","endDate":"04/12/2020","id":"6","message":"only big sizes","price":"79.9","startDate":"07/08/2014","title":"pajamas","type":"FASHION"}}
And the response for multiple coupons is:
{"coupon":[{"amount":"60","endDate":"05/09/2020","id":"5","message":"warranty for 1 year","price":"200.99","startDate":"20/02/2014","title":"sunglasses","type":"FASHION"},{"amount":"149","endDate":"04/12/2020","id":"6","message":"only big sizes","price":"79.9","startDate":"07/08/2014","title":"pajamas","type":"FASHION"}]}
Thanks for help :)
You are referencing an object not an array, check the docs for using an object in ngRepeat's arguments.
You would need ng-repeat="(key, value) in allCoupons
Try this
<tr ng-repeat="(key, value) in allCoupons">
<td>{{ value.id }}</td>
<td>{{ value.title }}</td>
<td>{{ value.amount }}</td>
<td>{{ value.startDate }}</td>
<td>{{ value.endDate }}</td>
<td>{{ value.price }}</td>
<td>{{ value.message }}</td>
<td>{{ value.type }}</td>
</tr>
Hope it helps
The server's response for a single coupon is in a different format from what it is for multiple coupons.
You should talk to your server guys and ask them to fix this. The coupon attribute needs to be an array of coupons regardless of whether there is a single coupon or multiple coupons. If there are no coupons, the coupon variable can either be undefined or an empty array.
If the server guys make this change for you, your UI code should work as is.
I understand, sometimes, it can be hard to get the server guys to comply with your request in a timely fashion, especially if they are on a different team.
If this is the case, you can put in a minor patch on the UI code to get the UI working with the existing service, until the server guys come up with a fix. You will have to change your $http.get snippet like below (Also incorporating the .success to .then change suggested by #Claies):
$http.get('rest/CompanyService/getAllCoupon').then(
function(response) {
if(!response.coupon) {
// No Coupons
$scope.allCoupons = [];
} else if(response.coupon instanceof Array) {
// Multiple Coupons
$scope.allCoupons = response.coupon;
} else {
// Single Coupon
$scope.allCoupons = [response.coupon];
}
});
Note: This fix is only a temporary solution. The server code has to be fixed eventually. There is absolutely no justification for the server to send the response in different formats.