I am studying Angular and I have a problem with my code. I am trying to create an ajax request by using promise and service. My output in ajax access in successful but I can't display it in the view.
Here's some of my code:
<div ng-app="promiseCall">
<div ng-controller="promiseCtrl">
<button tyle="button" class="btn btn-default" ng-click="promiseCallRequest()">Promise Call</button>
<table class="table table-bordered table-hovered">
<thead>
<tr>
<td class="text-center"><label>ID</label></td>
<td class="text-center"><label>TITLE</label></td>
<td class="text-center"><label>BODY</label></td>
<td class="text-center"><label>CREATED AT</label></td>
<td class="text-center"><label>UPDATED AT</label></td>
</tr>
</thead>
<tbody>
<!-- no output -->
<tr ng-repeat="item in noteListing">
<td>{{ item.id }}</td>
<td>{{ item.title }}</td>
<td>{{ item.body }}</td>
<td>{{ item.created_at }}</td>
<td>{{ item.updated_at }}</td>
</tr>
</tbody>
</table>
</div>
</div>
angular.module('promiseCall',[])
.controller('promiseCtrl', function($scope, $log, noteData) {
$scope.promiseCallRequest = function() {
var getPromiseCallData = noteData.getNoteData();
getPromiseCallData.then({
function(payload) {
console.log(payload); //no output :(
//$scope.noteListing = payload.data;
},
function(errorPayload) {
$log.error('Failure request in note', errorPayload);
}
});
}
}).factory('noteData', function($http, $log, $q) {
return {
getNoteData: function() {
var deferred = $q.defer();
$http.get("<?php echo site_url('tutorial/getAjaxData'); ?>")
.success(function(data){
/*
deferred.resolve({
id: data.id,
title: data.title
});
*/
//console.log('success'); -- ok
})
.error(function(msg, code){
deferred.reject(msg);
$log.error(msg, code);
alert('there must be an error!');
});
return deferred.promise;
}
}
});
Here's the JSON output:
{"article_data":[{"id":"1","title":"sample updated 1","body":"sample 1","created_at":"2015-06-15 15:37
:28","updated_at":"2015-06-15 21:38:46"},{"id":"2","title":"sample 2","body":"sample 2","created_at"
:"2015-06-15 15:37:54","updated_at":"2015-06-15 15:37:54"}]}
Try to remove the {} in your getPromiseCallData.then({});.
E.g.
$scope.promiseCallRequest = function() {
var getPromiseCallData = noteData.getNoteData();
getPromiseCallData.then(
function(payload) {
console.log(payload); //no output :(
//$scope.noteListing = payload.data;
},
function(errorPayload) {
$log.error('Failure request in note', errorPayload);
}
);
};
Hope it helps.
try the below code:
....
getPromiseCallData.then(function(payload) {
console.log(payload); //no output :(
//$scope.noteListing = payload.data;
}).catch(function(errorPayload) {
$log.error('Failure request in note', errorPayload);
});
...
getNoteData: function() {
return $http.get("<?php echo site_url('tutorial/getAjaxData'); ?>");
}
in getNoteData, what you did was a promise anti-pattern, you already have a promise, no need to create another wrapper for it.
Edit:
if you want to log the service's success and error, you could simply do, you still don't need an additional promise:
getNoteData: function() {
return $http.get("<?php echo site_url('tutorial/getAjaxData'); ?>").then(function(data){
//some log
return data;
}, function(err){
// log err
return err;
});
}
Related
I'm building a component on my project, which is actually getting all the data and console logging it, but here's the problem: Inside my array of clients, i have some objects (address, documents, ...), and i can't manage to call them on my table.
My script:
<script>
export default {
data: () => ({
clients: [],
}),
methods: {
getClients() {
this.$api
.get("/api_v1/clientes", {
})
.then((response) => {
this.clients = response.data[0];
console.log(response.data);
})
.catch((e) => {
console.log(e);
});
},
},
mounted() {
this.getClients();
},
};
</script>
My table (inside ):
<tbody>
<tr v-for="client in clients" v-bind:key="client.id">
<td>{{ client.id }}</td>
<td>{{ client.name }}</td>
<td>{{ client.email }}</td>
<td>{{ client.documents.cpf || client.documents.cnpj }}</td>
<td>{{ client.documents.celular }}</td>
<td>{{ client.status }}</td>
<td v-if="client.address">
{{ `${client.address.localidade} / ${client.address.uf}` }}
</td>
<td v-else>-</td>
<td>
<a :href="`/see-client/${client.id}`"
><i class="icon-magnifier"></i
></a>
<i class="icon-check" style="color: green"></i>
<i class="icon-close" style="color: red"></i>
</td>
</tr>
</tbody>
My controller:
public function index(Request $request)
{
$data = [
'pag' => 'All clients',
'link' => '/'
];
return view('clients.index', $data);
}
The data:
Someone have a clue of a different approach i could have? I'm using Vue2. It's one of my first big projects, so previously sorry for any rookie mistake. Thanks for your time and help!
This line is only getting the first client:
this.clients = response.data[0];
response.data is your array of clients (from the looks of things). When you use .data[0], you're getting the first element of the array (i.e. the first client).
Then, this line is trying to loop over 1 client, not an array of clients.
<tr v-for="client in clients" v-bind:key="client.id">
Try changing
this.clients = response.data[0];
to
this.clients = response.data;
If that doesn't work (it looks like you've got a weird data structure), try this instead:
this.clients = response.data.data;
Or this (it's unclear to me how many nested data properties you have):
this.clients = response.data.data.data;
I just made a quick analysis about your code. I think you should polish it a little bit.
Let me start with a quick catch up:
Update yuor js section with:
<script>
export default {
// Please do use the function format instead of lambda expression, it's recommended in the vue2 docs.
data() {
return {
clients: [],
};
},
methods: {
// Change this to an async method, so you can have more control on your code.
async getClients() {
try {
/**
* Here, you should have to know, that your file `routes/api.php` hass all of the prefixed /api routes
* So you have a direct access to /api prefixed routes
* Additionally read a little bit about destructuring.
*/
const response = await this.$api.get("/api/clientes");
// Now, please notice that you have 2 data path names.
this.clients = response.data.data; // {or please follow the correct path to the array container of the clients}.
} catch (e) {
console.log("Check this error: ", e);
}
},
},
// Now, change your mounted to an async method
async mounted() {
// Trust me this is going to work perfectly.
await this.getClients();
},
};
</script>
Now, please, please change your api controller logic to a response()->json(...)
public function index(Request $request)
{
// Your retrieve logic...
return response()->json($data);
}
Finally if you have successfully configured everything abouve, your vue component should be able to retrieve the information correctly, and your tbody must work this way...
<tbody>
<tr v-for="client in clients" v-bind:key="client.id">
<td>{{ client.id }}</td>
<td>{{ client.name }}</td>
<td>{{ client.email }}</td>
<td>{{ client.documents.cpf || client.documents.cnpj }}</td>
<td>{{ client.documents.celular }}</td>
<td>{{ client.status }}</td>
<td v-if="client.address">
<!-- You can replace what you have with: -->
{{ client.address.localidade }} / {{ client.address.uf }}
</td>
<td v-else>
-
</td>
<td>
<a :href="`/see-client/${client.id}`">
<i class="icon-magnifier"></i>
</a>
<i class="icon-check" style="color: green"></i>
<i class="icon-close" style="color: red"></i>
</td>
</tr>
</tbody>
I am calling Vue.js using a shortcode on a Wordpress page.
pl2010_vue_init_directory = pl2010_vue_init_directory || (function(ctx) {
new Vue(
{
el: '#'+ctx.el,
data: {
errorMsg: "",
successMsg: "",
showAddModal: false,
showEditModal: false,
showDeleteModal: false,
listings: [],
newListing: {name: "",tel1: "",email1: ""},
currentListing: {}
},
mounted: function(){
console.log("Start Mounting...");
this.getAllListings();
console.log("End Mounting...");
},
methods: {
async getAllListings(){
this.listings = [];
axios.get('/scripts/prod/directory.php?action=read').then(response => {
this.listings = response.data.listings;
console.log(this.listings)
})
.catch(err => {
console.log(err);
});
}
}
});
});
NOTE: I have updated the "getAllListings()" function. The working code is above. The values now output ok.
<tr class="text-center" v-for="listing in listings">
<td>{{ listing.id }}</td>
<td>{{ listing.name }}</td>
<td>{{ listing.tel1 }}</td>
<td>{{ listing.email1 }}</td>
<td><i class="fas fa-edit"></i></td>
<td><i class="fas fa-trash-alt"></i></td>
</tr>
Thank you!
Try this
async getAllListings() {
try {
const res = await fetch("/scripts/prod/directory.php?action=read");
if (res.data.error) {
console.log("Error");
errorMsg = response.data.message;
} else {
const data = await res.json();
listings = data.listings;
console.log(listings);
}
} catch (err) {
console.log(err);
}
}
Amended the code above and it is now working ok. Array is assigned to "listings" and outputs on the page.
I try to put data from another array into one part in table.
My first json "names" :
[
{
"name": "AAAAAA",
"down": "False"
},
{
"name": "BBBBBB",
"down": "True"
},
{
"name": "CCCCC",
"down": "False"
}
]
Second json "data" :
[
{
"data": "35%"
}
]
Javascript:
var app = angular.module('app', []);
app.service('service', function($http, $q){
this.getNames = function () {
var names = $http.get('names.json', {cache: false});
var datas = $http.get('data.json', {cache: false});
return $q.all({datas,names});
};
});
app.controller('FirstCtrl', function($scope, service, $http) {
var promise = service.getNames();
promise.then(function (data) {
$scope.names = data.names.data;
$scope.datas = data.datas.data;
$scope.namesanddata = $scope.names.concat($scope.datas);
console.log($scope.namesplit);
console.log($scope.datas);
});
});
Table in HTML :
div ng-controller="FirstCtrl"
<table>
<tbody>
<tr ng-repeat="name in namesanddata">
<td>{{name.name}}</td>
<td ng-if="name.down=== 'False'">{{name.down}}</td>
<td ng-if="name.down !== 'False'">{{name.data}}</td>
</tr>
</tbody>
</table>
</div>
My problem - <td ng-if="name.down !== 'False'">{{name.data}}</td>dont show in table. in console.log it concat to array like 4 object and probably by this it don't show in table next to {{name.name}}, but i don't know how to show {{name.data}} from another json in table instead {{name.down}}.
Thanks for answers in advance.
To give you an output of:
AAAAAA False
BBBBBB 35%
CCCCC False
Remove this line from the Controller:
$scope.namesanddata = $scope.names.concat($scope.datas);
Then either:
Solution 1 - Inline in the view
Change your ng-repeat as follows:
<tr ng-repeat="name in names">
<td>{{ name.name }}</td>
<td>{{ (name.down === 'False') ? name.down : datas[0].data }}</td>
</tr>
OR
Solution 2 - Keep the view clean by using a Filter
app.filter('myFilter', function () {
return function(items, datas) {
var filtered = [];
angular.forEach(items, function (i) {
if (i.down !== "False")
i.down = datas[0].data;
filtered.push(i);
});
return filtered;
}
});
Change your ng-repeat as follows:
<tr ng-repeat="name in names | myFilter: datas">
<td>{{ name.name }}</td>
<td>{{ name.down }}</td>
</tr>
I am using ng-table for AngularJS and i am using single JSON file for the table data. i want to import multiple JSON files into a single table. I am able to import single JSON file using this code below.
Thank you in advance.
HTML
<table ng-table="tableParams" show-filter="true" class="table ng-table-responsive">
<tr ng-repeat="user in $data">
<td data-title="'ID'" sortable="'ID'">
{{user.ID}}
</td>
<td data-title="'Name'" sortable="'Name'" filter="{ 'name': 'Name' }">
{{user.Name}}
</td>
<td data-title="'Email'" sortable="'email'">
{{user.email}}
</td>
<td data-title="'Address'" sortable="'address'">
{{user.address}}
</td>
<td data-title="'PersonalEmail'" sortable="'personalemail'">
{{user.personalemail}}
</td>
<td data-title="'PhoneNo'" sortable="'phoneno'">
{{user.phoneno}}
</td>
<td data-title="'Status'" sortable="'status'">
{{user.status}}
</td>
</tr>
</table>
JavaScript
var app = angular.module('main', ['ngTable']).controller('DemoCtrl', function($scope, ngTableParams, NameService) {
var data = NameService.data;
$scope.tableParams = new ngTableParams(
{
page: 1, // show first page
count: 10, // count per page
sorting: {name:'asc'}
},
{
total: 0, // length of data
getData: function($defer, params) {
NameService.getData($defer,params,$scope.filter);
}
});
$scope.$watch("filter.$", function () {
$scope.tableParams.reload();
});
});
app.service("NameService", function($http, $filter){
function filterData(data, filter){
return $filter('filter')(data, filter)
}
function orderData(data, params){
return params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData;
}
function sliceData(data, params){
return data.slice((params.page() - 1) * params.count(), params.page() * params.count())
}
function transformData(data,filter,params){
return sliceData( orderData( filterData(data,filter), params ), params);
}
var service = {
cachedData:[],
getData:function($defer, params, filter){
if(service.cachedData.length>0){
console.log("using cached data")
var filteredData = filterData(service.cachedData,filter);
var transformedData = sliceData(orderData(filteredData,params),params);
params.total(filteredData.length)
$defer.resolve(transformedData);
}
else{
console.log("fetching data")
$http.get("json/1.json").success(function(resp)
{
angular.copy(resp,service.cachedData)
params.total(resp.length)
var filteredData = $filter('filter')(resp, filter);
var transformedData = transformData(resp,filter,params)
$defer.resolve(transformedData);
});
}
}
};
return service;
});
Retrieve all your JSON content with $q.all() and merge your arrays in the callback. Finally pass the resulting array to ng-table.
i have this situation: i want to use ng-repeat directive on a String that contains Json line. This string come from a rest service with jersey. When i call the page that contains this directive there is an error. How i can resolve this situation? Thanks to all.
SyntaxError: Unexpected token {
at Object.parse (native)
at fromJson (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:1035:14)
at defaults.defaults.transformResponse (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:6933:18)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:6908:12
at Array.forEach (native)
at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:302:11)
at transformData (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:6907:3)
at transformResponse (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:7589:17)
at deferred.promise.then.wrappedCallback (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:10943:81)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:11029:26
}
This is my code:
list.html
<tr ng-repeat="person in persons">
<td>{{ person.name }}</td>
<td>{{ person.lastname }}</td>
<td>{{ person.tasks }}</td>
<td>{{ person.skills }}</td>
<td><a ng-click="editUser(person.id)" class="btn btn-small btn-primary">Modifica</a></td>
<td><a ng-click="deleteUser(person.id)" class="btn btn-small btn-danger">Elimina</a></td>
</tr>
services.js
services.factory('PersoneFactory', function ($resource) {
return $resource(baseUrl + '/GestRisorse/rest/person/personList', {}, {
query: { method: 'GET', isArray: false },
})
});
controller.js
app.controller('PersonListCtrl', ['$scope', 'PersoneFactory', 'PersonFactory', '$location',
function ($scope, PersoneFactory, PersonFactory, $location) {
$scope.persons = PersoneFactory.query();
}]);
restController.java
#Path("/person")
public class PersonRestController {
private PersonDAO personDao = new PersonDAO();
#GET
#Path("/personList")
#Produces("application/json")
public String getPersonList() {
return personDao.getAllPerson();
}
...
}
personDao.java
public String getAllPerson(){
DBCollection collection = connection.getCollection("users");
StringBuffer s = new StringBuffer();
DBCursor cursor = collection.find();
try {
while(cursor.hasNext()) {
s.append(cursor.next());
}
} finally {
cursor.close();
}
return s.toString();
}
...
}
Thanks to the people that wrote comment under my question, i want to say them that I found the problems, there where 2:
1) i didnt use properly the promise, now i add in the controller these line
PersoneFactory.query().$promise.then(function(data) { $scope.persons = JSON.parse(data); }, function(errResponse) { console.log("errore"); });
2) i didnt format json properly, so the string that came from backend wasn't a valid json.
Thanks to all.