I currently have a method in my controller which does this:
#RequestMapping(value="/angular", produces="application/json")
public #ResponseBody Page handleAngularRequest(Model model, HttpServletRequest httpRequest){
return pageObject;
}
This returns all json data to the page like so:
{
"pageId": null,
"organizationId": null,
"pageModule": "browse",
"pageTitle": null,
"pkId": null,
"templateId": null,
"dataMap": null,
"pageEventList": null,
"pageElementList": null,
"tableId": null,
"elementId": null,
"elementDictionaryList": null,
"elementDictionaryEventList": null,
"elementIds": null,
"pageDataMap": {
"pageObjectId": "",
"module": "REQUISITION",
"mailId": "test#example.com",
"sessionId": "9d538ba3-2d41-4d5b-9f0d-4ac467f5e62e",
"requestId": "21061c6c-2868-46c7-bd31-bbebfb2eee4e",
"userId": "JHUBBARD0000000",
"pages": "",
"systemId": "9d538ba3-2d41-4d5b-9f0d-4ac467f5e62e",
"service": "",
"formatHeader": "Y",
"extrinsic": {
"pageObjectId": "",
"module": "REQUISITION",
"mailId": "test#example.com",
"sessionId": "9d538ba3-2d41-4d5b-9f0d-4ac467f5e62e",
"requestId": "21061c6c-2868-46c7-bd31-bbebfb2eee4e",
"userId": "test",
"pages": "",
"systemId": "9d538ba3-2d41-4d5b-9f0d-4ac467f5e62e",
"service": "",
"formatHeader": "Y"
},
"header": {
"RequisitionHeader_icReqHeader": ""
}
}
}
My question is: How do I get this data into an AngularJS controller/workflow so I can start bindding it and putting it onto a page?
A quick start-up would be like this:
http://plnkr.co/edit/uUj4MV3RvZB2P4uJt35H?p=preview
This will show the page.pageDataMap.mailId property from the JSON response.
app.js
angular.module('app', [])
.service('ApiService', ['$http', '$q', function($http, $q) {
return {
query: function() {
var deferred = $q.defer();
$http.get('/angular')
.success(function(data) {
deferred.resolve(data);
});
return deferred.promise;
}
};
}])
.controller('Controller', ['ApiService', '$scope', function(ApiService, $scope) {
$scope.page = {};
$scope.refresh = function() {
ApiService.query()
.then(function(data) {
$scope.page = data;
});
};
$scope.refresh();
}])
index.html
<div ng-app="app" ng-controller="Controller">
<div ng-bind="page.pageDataMap.mailId"></div>
</div>
Related
Controllers/Komic Controller
public function search($value)
{
// Query Wildcards and Resources
$result = new KomikCollection(Komik::where('judul', 'like', '%'. $value .'%')->paginate(2));
return $result;
}
its fine when i directly return the $result
{
"data": [],
"links": {
"first": "http://localhost:8000/api/komik/a?page=1",
"last": "http://localhost:8000/api/komik/a?page=2",
"prev": null,
"next": "http://localhost:8000/api/komik/a?page=2"
},
"meta": {
"current_page": 1,
"from": 1,
"last_page": 2,
"links": [
{
"url": null,
"label": "« Previous",
"active": false
},
{
"url": "http://localhost:8000/api/komik/a?page=1",
"label": "1",
"active": true
},
{
"url": "http://localhost:8000/api/komik/a?page=2",
"label": "2",
"active": false
},
{
"url": "http://localhost:8000/api/komik/a?page=2",
"label": "Next »",
"active": false
}
],
"path": "http://localhost:8000/api/komik/a",
"per_page": 2,
"to": 2,
"total": 4
}
}
but when i'll return it using helpers/response
public function search($value)
{
// Query Wildcards and Resources
$result = new KomikCollection(Komik::where('judul', 'like', '%'. $value .'%')->paginate(2));
// send response
return response()->json($result, 200);
}
the meta and link on the json response will be disapppear and return result like this
{
"id": 1,
"title": "Spare me, Great Lord !"
},
{
"id": 2,
"title": "I'm An Evil God"
}
I want the response include the meta and link tags, how do i fix this?
If you want to meta data with response then you must need to add ->response()->getData(true) in collection results.
So your final function looks like :
public function search($value)
{
// Query Wildcards and Resources
$result = new KomikCollection(Komik::where('judul', 'like', '%'. $value .'%')->paginate(2))->response()->getData(true);
// send response
return response()->json($result, 200);
}
I want make the values in one collection to be attributes in my resource.
{
"data": {
"import_type": "Material",
"id": "1178d470-85b6-4594-9bb4-e9e17b9d9104",
"tabs": [
{
...
}
],
"graphics": {
"render": "",
"shading_colour": "",
}
"identity": {
"render": "",
"shading_colour": "",
}
}
}
Unfortunately I get that json code:
{
"data": {
"import_type": "Material",
"id": "1178d470-85b6-4594-9bb4-e9e17b9d9104",
"tabs": [
{
...
}
],
"0": [
{
"graphics": {
"render": "",
"shading_colour": "",
}
},
{
"identity": {
"render": "",
"shading_colour": "",
}
},
]
}
}
Because I have more attributes like "graphics", "identity" I want to display them dynamically, but I dont know how to achieve that.
Here is my PHP code:
class MaterialResource extends JsonResource
{
public function toArray($request)
{
return [
'import_type' => 'Material',
'id' => $this->uuid,
'tabs' => MaterialTabsResource::collection($this->tabs),
MaterialExtensionResource::collection($this->extensions),
];
}
}
The problem is that instead of mocked I got a loading screen with unresolved query, Cypress make several attempts to re-query it again, and there is no error messages.
I'm using Cypress from Quasar-testing harness. I'd like to mock graphql call.
In my component I have an apollo query:
apollo: {
assetsOverview: {
query: ASSETS_OVERVIEW,
loadingKey: 'loading'
}
}
For that purpose I'm using fixtures in such way:
cy.intercept('POST', api, req => {
if (req.body.operationName === 'getAssetOverview') {
// This condition works just fine
req.reply({
fixture: 'asset-table.json'
})
}
})
My fixture looks like this:
{
"assetsOverview": {
"assetMetrics": [
{
"assetId": "todo-conveyor",
"assetName": "Conveyor belts",
"childAssetIds": null,
"oeeMetrics": {
"availability": null,
"oee": null,
"performance": null,
"quality": null,
"__typename": "AssetOeeMetrics"
},
"stateMetrics": {
"blocked": null,
"failed": null,
"idle": null,
"running": null,
"stopped": null,
"__typename": "AssetStateMetrics"
},
"__typename": "AssetMetrics"
}
],
"__typename": "AssetMetricsOverview"
}
}
Figured out that I have to wrap my fixtures object within data.
Like this:
{
"data": {
"assetsOverview": {
"assetMetrics": [
...
]
}
}
}
I'm trying to output values from an axios promise to my vue component. So far I'm still getting an error [Vue warn]: Error in render: "TypeError: Cannot read property 'surname' of null". Below is what my code looks like
<template>
<div>
{{user.surname}}
</div>
</template>
<!-- ----------------------------------------------------------------------------------- -->
<script>
export default {
name: 'EmployeeCard',
data(){
return{
user: null
}
},
methods:{
getUser(){
axios.get('/api/users/'+ this.$route.params.id)
.then ( response => {
this.user = response.data.data;
})
}
},
mounted(){
this.getUser();
}
}
</script>
This is the actual data returned from the api
{
"data": [
{
"data": {
"id": 11,
"surname": "Hand",
"first_name": "Westley",
"other_name": "Collier",
"email": "ole48#example.com",
"phone_number": "306-755-6192 x493",
"birthday": "06/21/1991",
"company_id": 3,
"department_id": 6,
"job_id": 1,
"state_id": 11,
"marital_status": "married",
"gender_id": 2,
"photo": null,
"is_admin": 0,
"date_of_employment": null,
"job": {
"id": 1,
"title": "HR Manager",
"comment": null,
"created_at": "2019-10-30 17:38:42",
"updated_at": "2019-10-30 17:38:42"
},
"department": {
"id": 6,
"name": "Technical",
"created_at": "2019-10-30 17:38:43",
"updated_at": "2019-10-30 17:38:43"
},
"gender": {
"id": 2,
"name": "Female",
"created_at": "2019-10-30 17:38:42",
"updated_at": "2019-10-30 17:38:42"
},
"company": {
"id": 3,
"name": "Cometshipping",
"created_at": "2019-10-30 17:38:42",
"updated_at": "2019-10-30 17:38:42"
},
"employmentstatus": {
"id": 1,
"name": "Full Time Permanent",
"comment": null,
"created_at": "2019-10-30 17:38:42",
"updated_at": "2019-10-30 17:38:42"
}
}
}
]
}
<template>
<div>
{{surname}}
</div>
</template>
<!-- ----------------------------------------------------------------------------------- -->
<script>
export default {
name: 'EmployeeCard',
data(){
return{
user: null
}
},
computed: {
surname () {
if (this.user) {
return this.user.surname
}
}
}
methods:{
getUser(){
axios.get('/api/users/'+ this.$route.params.id)
.then ( response => {
this.user = response.data[0].data;
})
}
},
mounted(){
this.getUser();
}
}
</script>
Your user variable will initially be null, and you can't get properties from a null value. Therefore, you should replace {{ user.surname }} With {{ user ? user.surname : '' }}.
Another issue is that the data property from your response is an array, not an object, so in your mounted hook you can't do this.user = response.data.data. Instead, you should do this.user = response.data[0].data.
That way, while your user isn't fetched you'll display an empty text instead of getting an error.
Also, I suggest you add a catch hook to your promise to tend to any possible errors.
<template>
<div>
{{ user.surname }}
</div>
</template>
<script>
export default {
name: 'EmployeeCard',
data(){
return{
user: {}
}
},
methods:{
getUser(){
axios.get('/api/users/'+ this.$route.params.id)
.then ( {data} => {
this.user = data[0].data;
})
}
},
mounted(){
this.getUser();
}
}
</script>
I'm using laravel-fractal to transform my data and here is a response
how can I delete data;
I made a search and I realized I need to use a Serializer;
But I just want to remove data for all includes(relations)
{
"data": [
{
"id": 1,
"name": "test name",
"status": null,
"tags": [
"first",
"second"
],
"created_at": "1396/9/3",
"contacts": {
"data": [
{
"value": "test#test.com",
"type": "email",
"icon": "fa fa-email"
}
]
}
},
{
"id": 2,
"name": "name test 2",
"status": null,
"tags": [],
"created_at": "1396/9/3",
"contact": {
"data": []
}
}
]
I found my answer at GitHub. The following answer is copied from thephpleague/fractal on GitHub:
You can write your own serializer for that.
class YourDataSerializer extends ArraySerializer
{
public function collection($resourceKey, array $data)
{
if ($resourceKey) {
return [$resourceKey => $data];
}
return $data;
}
public function item($resourceKey, array $data)
{
if ($resourceKey) {
return [$resourceKey => $data];
}
return $data;
}
}
Register your serializer with manager
$manager = new Manager();
$manager->setSerializer(new YourDataSerializer());
and when you want to have data or anything else you can pass in resourceKey to your Item or Collection as a third param.
$resource = new Collection($folders, new AccountFolderTransformer(), 'data');
use array serializer:
Fractal::create()
->item($item, new MyTransformer())
->serializeWith(new ArraySerializer())