Parsing json data and show in loop in a table - arrays

I'm developing a website with laravel where I've a json response from server with a blade.php view like below,
[{"id":1,"user_id":"1","patient_name":"kk","age":"44","sex":"Male"},
{"id":2,"user_id":"1","patient_name":"noor","age":"7","sex":"Male"},
{"id":3,"user_id":"1","patient_name":"noor","age":"44","sex":"Male"}]
How can I iterate through this json object so that I can show the data in a table with patient_name,age,sex column in blade.php?

First you would have to convert the JSON to an array with $array_data = json_decode($array, true), then you can pass the data to your view with return view('page', ["array_data"=>$array_data]);, next you would have to parse it in blade like:
<table>
<tr>
<td>id</td>
<td>User id</td>
<td>Patient name</td>
<td>Age</td>
<td>Sex</td>
</tr>
#foreach($array_data as $key=>$value){
<tr>
<td>{{$value["id"]}}</td>
<td>{{$value["user_id"]}}</td>
<td>{{$value["patient_name"]}}</td>
<td>{{$value["age"]}}</td>
<td>{{$value["sex"]}}</td>
</tr>
#endforeach
And so your code in your controller would be:
$array_data = json_decode($array, true);
return view('page', ["array_data"=>$array_data]);
Note that the string page must be the name of your blade template minus the .blade.php, i.e. if your template is called page.blade.php you would use the string page

Related

how to fix ngtable pagination?

I have developed a ngtable with a filter. The pagination on the table does not work anymore though? When I select the show 10 rows on the bottom of the table it still shows 14 rows? How can i fix the pagination/indexing?
This is my table definition:
<table ng-table="tableParams" class="table">
<tr ng-repeat="account in $parent.filtered =(data | filter:search.accountName | filter:search.id)">
<td data-title="'id'">
{{account.account.accountId.id}}
</td>
<td data-title="'name'">
{{account.account.accountName}}
</td>
</tr>
</table>
plunkr:http://plnkr.co/edit/Rqt6px?p=preview
You need to figure pagination function by yourself. You may see ng-table's example in here.
var Api = $resource("/data");
this.tableParams = new NgTableParams({}, {
getData: function(params) {
// ajax request to api
return Api.get(params.url()).$promise.then(function(data) {
params.total(data.inlineCount); // recal. page nav controls
return data.results;
});
}
});
It first load all the data into Api. The params.url() contains current page and page count. It then use these two variable to return part of dataset. So you may need to figure out how to return this part of data.

Mootools 1.3.2 Request.HTML fetch table rows

First off please don't bash me for using old technology (polling) and an old version of Mootools (1.3.2) as I don't have control over these factors.
Ok here's my problem.
I have a page which refreshes every few seconds to fetch new data from the database via AJAX. Ideally the structure of the returned value should be as such:
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
After receiving this table row structure result, I need to append that to the current table in the page which essentially just adds a new record on the table if there are new records. If there's none, then no changes to the table are made.
Currently I am using
var req = new Request.HTML({url: url_to_get_new_rows,
onSuccess: function(html, responseHTML) {
// append table row 'html' here
}
}).send();
However, the returned value in the 'html' variable that I'm supposed to append at the end of the table only returns
1 2 3 4
This obviously is an undesired behavior as I need the tr and td elements to make it work.
I hope someone could help me with this problem.
THANKS!
Javascript:
new Request.HTML({
url:'tr.php',
onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
var tbody = document.id('tbody');
tbody.set('html', tbody.get('html') + responseHTML);
// or
var tr = new Element('table', {'html': responseHTML}).getElement('tr');
tr.inject(tbody);
}
}).get();
HTML:
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</tbody>
</table>

Angular ui binding issue

I'm trying to bind a late calculated field to my ui with not much of success, This is my controller -
PaymentsController = ['$scope', 'Payment','Campaign', ($scope, Payment,Campaign)->
Payment.query().then((payments) ->
$scope.payments = payments
angular.forEach($scope.payments,(payment,index)->
payment.from = $scope.getFrom(payment)
)
The concept is simple, but the method getFrom returns a promise, when i get to this controller i load a list, the ui looks like this:
<table>
<tr>
<th ng-bind="'from'|i18n"></th>
<th ng-bind="'amount'|i18n"></th>
<th ng-bind="'to'|i18n"></th>
<th ng-bind="'description'|i18n"></th>
</tr>
<tr ng-repeat="payment in payments">
<td ng-bind="payment.from"></td>
<td>{{getAmount(payment)}}</td>
<td>{{getTo(payment)}}</td>
<td>{{getDescription(payment)}}</td>
</tr>
<tr ng-show="!payments.length">
<td ng-bind="'no_payments'|i18n"></td>
</tr>
</table>
nothing fency,
all fields are bind as expected except the from, according to controller i expect to see "asd"
but i see nothing.
I need to return a promise in this method but first I'm trying to make it work with simple code.
My problem was more conceptual I guess, I managed to fix this by making the controller control the view and not the view to control the controller, so instead of assigning a promise to the "from" field, I declared it when I had a value to put in, so my code looks like this:
angular.forEach($scope.payments, (payment, index)->
$scope.resolveFrom(payment)
)
$scope.resolveFrom = (payment)->
if payment.amount < 0
payment.from = "1"
else if payment.campaign_id
Campaign.get(payment.campaign_id)
.then((campaign)->
payment.from = campaign.name)))
payment.from = "unkown"
I'm not sure if this is the best practice, would appreciate comments/alternative solutions.

Handlebars.js - Accessing parent index from 2D array

I have a 2D array in a JSON object (called table ;)
data = {
tableID : "testTable",
table : [
[{type:'a', value:'x'},{type:'a', value:'y'},{type:'a', value:'z'}],
[{type:'a', value:'x'},{type:'a', value:'y'},{type:'a', value:'z'}],
[{type:'a', value:'x'},{type:'a', value:'y'},{type:'a', value:'z'}]
]
};
And have been successfully rendering it out with handlebars using the template:
<table id = "{{tableID}}-table">
{{#each table}}
<tr id = "{{../tableID}}-row-{{#index}}">
{{#each this}}
<td id = "{{../../tableID}}-row-{{../index}}-col-{{#index}}">
{{this.type}}-{{this.value}}
</td>
{{/each}}
</tr>
{{/each}}
</table>
However, in the td tag id I can't seem to access the parent index
{{../index}} - the index of the row. Nothing is returned:
<td id = "testTable-row--col-x">
However, I can access the index of the current context {{#index}}.
Any ideas??
Many many thanks in advance!!
Rich
p.s. Using 1.0.0-rc.3
This is an open issue/feature on handlebar. You can check the progress for the same here
However you can check the workaround here
Since Handlebars version 2.0.0, you can use
{{#../index}}

CakePHP: Updating DIV content using AJAX

I have a table where I load an external php file[name # settings_profile.php] inside settings.ctp file.
Code snippet from settings.ctp
<table>
<tr>
<td rowspan="2" id="upload-response-message">
<?php include("settings_profile.php"); ?>
</td>
</tr>
</table>
settings_profile.php
<?php
$image_path = $user['User']['image_path'];
if (!empty($image_path)) {
echo $this -> Image -> resize($image_path, 100, 200);
}else{
echo 'EMPTY' ;
}
?>
The output from settings_profile.php is generated as follows [copied from source code]
<table>
<tr>
<td rowspan="2" id="upload-response-message"> One
<img src="/dearmemoir/uploads/resized/image.jpg" alt="thumb" />
</td>
</tr>
</table>
The contents of $user['User']['image_path'] are updated by calling Controller using AJAX and I am trying to reload setting_profile.php file inside the table using -
function showUploadResponse(data) {
alert (data.status);
if( data.status == 1 ) {
$("#upload-response-message").load("settings_profile.php #upload-response-message");
}
}
But the content was never updated in the page. Any help?
You are breaking the MVC paradigm AND CakePHP conventions by doing this. If you are including an external php file in a view that is not a CakePHP helper, then you are doing something wrong.
If that is all there is to settings_profile.php, then delete it and move the functionality to either a controller or a component. Then assign the image to a variable that gets passed to the view.
If you are using Ajax to then make a call back to the server, then your page will never be reloaded in order for the included code in your view to be called again. Instead, pass the information about the resized image back to your javascript file and update the table through javascript.
//Pseudo Code
//Page is Loaded
//Ajax call made back to the server to resize the image
//Server resizes the image and sends the new image src back to the script
{Image:{name: "newImage", src: "/dearmemoir/uploads/resized/image1.jpg"}}
var returnedData = resultsFromAjax;
//Use javascript to update the image
var imgElement = document.getElementById('ProfileImageId').setAttribute("src", returnedData.Image.src);
That should update your image!

Resources