I am stuck with this annoying problem that I can't seem to figure out.
I want to take a JSON file and only show that information I find relevant. But somehow I can only show the whole thing, and not choose, for example, {{post.title}}.
Here is the JSON I want to use: http://www.omdbapi.com/?t=frozen&y=&plot=short&r=json
This is my controller:
.controller('View5Ctrl', function ($scope, $http, $timeout)
$http({
method: 'GET',
//url: '/test/allMovies/test'
url: 'http://www.omdbapi.com/?t=frozen&y=&plot=short&r=json',
dataType: 'json'
}).
success(function (data, status, headers, config) {
$scope.posts = data;
}).
error(function (data, status, headers, config) {
$scope.error = data;
});
});
And this is my HTML file
<div ng-repeat="post in posts" >
<div id="div">
<p>
{{post.title}}
</p>
<p></p>
</p>
</div>
By this, I only get a bunch of empty paragraphs. But if I remove the .title, I get the whole thing out.
SOLUTION:
Thanks for the answers! I will post the solution here for future viewers.
<div id="div">
<p>
{{posts.Title}}
</p>
</div>
Related
I'm having this situation I'm iterating over a json response from an endpoint:
chunk of controller code:
$http({
method: 'GET',
url: 'http://mywebsite.com/api/v1/stores/'
}).
success(function(data, status, headers, config) {
$scope.stores = data;
}).
error(function(data, status, headers, config) {
$scope.name = 'Error!';
});
and on my html view side I've got this:
<tbody>
<tr ng-repeat="store in stores">
<td>{{store.name}}</td>
<td> {{store.type}} </td>
<td><span ng-repeat="client in retrieveClientName(store.client_id)">
{{client.name}}
</span>
</td>
<td>{{store.address}}</td>
</tr>
</tbody>
As you can see I'm trying to retrieve the client name using a function that receives an store.client_id from the values inside the stores array. Normally using a function triggered by a ng-click will be easy but how can I achieve this "on the fly" while I'm iterating?.
Because executing this I get a kind of infinite loop that breaks all apart.
here is the code of the function that returns client name on the controller side:
$scope.retrieveClientName = function(id) {
$http({
method: 'GET',
url: 'http://mywebsite.com/api/v1/clients?client_id='+id
}).
success(function(data, status, headers, config) {
return $scope.clients=data;
}).
error(function(data, status, headers, config) {
$scope.name = 'Error!';
});
}
I have also try using mg-init directive
<td ng-init="clients=retrieveClientName(store.client_id)"><span ng-repeat="client in clients">{{client.name}}</span></td>
One way would be get all data when you get the stores back
$http({
method: 'GET',
url: 'http://mywebsite.com/api/v1/stores/'
}).
success(function(data, status, headers, config) {
$scope.stores = data;
angular.forEach($scope.stores, function(store){
$scope.retrieveClientName(store.client_id).then(function(clients){
store.clients = clients;
});
});
}).
error(function(data, status, headers, config) {
$scope.name = 'Error!';
});
Edit: I would change the structure a bit for cleaner code
$scope.retrieveClientName = function(store) { // pass in store so we can attach results here
$http({
method: 'GET',
url: 'http://mywebsite.com/api/v1/clients?client_id='+store.client_id
}).
success(function(data, status, headers, config) {
return store.clients = data; // attach result in object
}).
error(function(data, status, headers, config) {
$scope.name = 'Error!';
});
}
$http({
method: 'GET',
url: 'http://mywebsite.com/api/v1/stores/'
}).
success(function(data, status, headers, config) {
$scope.stores = data;
angular.forEach($scope.stores, function(store){
$scope.retrieveClientName(store); // no need .then here
});
}).
error(function(data, status, headers, config) {
$scope.name = 'Error!';
});
<tbody>
<tr ng-repeat="store in stores">
<td>{{store.name}}</td>
<td> {{store.type}} </td>
<td><span ng-repeat="client in store.clients"> <!-- use data here -->
{{client.name}}
</span>
</td>
<td>{{store.address}}</td>
</tr>
</tbody
You must understand that $http jest asynchronous, so Your response will be back after all ng-repeat, so such thing must be done in controller in $q.all and after that render view with ng-repeat.
So do foreach on stores and in foreach add to array, next use this array in $q.all, after $q.all render view.
The retrieveClientName function is wrong: the $http return a promise, the return value of success callback is not the return value of the function and you can't bind the ng-repeat to a promise, try this one:
$scope.retrieveClientName = function(id) {
return $resource('http://mywebsite.com/api/v1/clients?client_id='+id).query();
}
Don't forget to include the ngResource dependency.
I want to retrieve image from JSON. Right now i am retrieving all these things from JSON Like Price, Display order But Image can't be retrieve.
HTML:
<div ng-controller="chooseProductDescription">
<div ng-repeat="cat in productDescription">
<img src="{{cat.product.productPictures[0].pictureUrl}}">
<span>Price</span>{{cat.product.price}}
<span>Display Order</span>{{cat.product.productPictures[0].displayOrder}}
</div>
</div>
CONTROLLER:
.controller('chooseProductDescription', function($scope, $http){
$http({
method:'get',
url:'http://www.json-generator.com/api/json/get/cgrvadFrGW?indent=2',
header:{'Content-Type':'application/json'},
}).success(function(data,status,headers, config){
$scope.productDescription = data;
alert("shjkshjksadhkjas");
}).error(function(data, status,headers, config){
})
})
Right now i am retrieving data from this URL:
http://www.json-generator.com/api/json/get/cgrvadFrGW?indent=2
i want to retrieve image from json. Please share your ideas.
You are not using the correct format in the reponse of the $http promise. The code should be :
$http({
method:'get',
url:'http://www.json-generator.com/api/json/get/cgrvadFrGW?indent=2',
header:{'Content-Type':'application/json'},
}).success(function(response){
$scope.productDescription = response.data;
alert("shjkshjksadhkjas");
}).error(function(response){
})
I am trying to display the users favourite cities current weather, I am able to pull the weather data back to the console by using there favourite city, however I am having trouble displaying it within an ng-repeat which i use to display the favourites list.
HTML code
<li ng-repeat="weatherList in weatherLists" class="col-xs-12">
<span class="col-xs-12 col-sm-8">{{weatherList.place}}</span>
<span class="col-xs-12 col-sm-12">
</span>
<div class="col-xs-12 col-sm-2">
<button type="button" name="button" class="deleFav" ng-click="delete(weatherList)">Delete</button>
<button type="button" name="button" class="getFavWeather" ng-click="getFavWeather(weatherList)">Refresh To Get Update Weather</button>
</div>
<div class="col-xs-12">
<input type="text" ng-model="weatherList.edit"/>
<button ng-click="edit(weatherList)">Edit</button>
</div>
</li>
JS code
yApp.controller('favouritesController', function($scope, $http, $rootScope, $route, $location) {
$http({
method:'GET',
url:'http://localhost:8080/inter'
})
.success(function(data, status, headers, config) {
console.log(status)
console.log(data)
const newData = data.data
$rootScope.newData
console.log(newData)
$scope.weatherLists = newData
})
.error(function(data, status, headers, config) {
console.log('error')
})
$scope.getFavWeather = function(weatherList) {
console.log(weatherList._id)
console.log(weatherList.place)
const GetFav = weatherList.place
$http({
method: 'GET',
url: 'http://localhost:8080/inter/call/weatherCall/' + GetFav
})
.success(function(data, status, headers, config) {
console.log(status)
console.log("------Hello-----")
console.log(data)
})
.error(function(data, status, headers, config) {
console.log('error')
})
}
})
Object that I want to pull through and display is
{"status":"success","message":"weather found for some city","data":{"id":2643743,"city":"London","country":"GB","now":[{"id":501,"main":"Rain","description":"moderate rain","icon":"10d"}],"temp":{"day":13.17,"min":10.69,"max":13.56,"night":10.69,"eve":11.87,"morn":13.56}}}
New to angular, new to php, new to programming at all.
I'm using ui-router, and here's how it looks like:
.state('admin', {
url:'/admin',
templateUrl: 'admin/admin.php',
controller: 'AdminController'
})
.state('admin.auto', {
url: '/auto',
templateUrl: 'admin/states/auto.php',
controller: 'AdminAutoController'
})
.state('admin.auto.update', {
url: '/update',
templateUrl: 'admin/states/autoupdate.php',
controller: 'AdminAutoUpdateController'
})
Routing works fine, on my admin.auto view, I've got list of autos with "edit" and "delete" buttons. I get the list from MySQL database.
<div ng-repeat="auto in autos">
<p>{{auto.mark}}</p>
<button class="btn btn-primary" ng-click="updateAuto(auto.mark)">Edit</button>
<button class="btn btn-danger">Delete</button>
</div>
So now I need to post auto.id to auto update nested view, so i can select proper table row. At this point I'm struggling to post any data to update view, just to find out if it works, so here it is:
.controller('AdminAutoController', ['$scope', '$http', '$modal', function($scope, $http, $modal) {
$http.get('php/DBZ.php').success(function(data) {
$scope.autos = data;
});
$http({
url: "admin/states/autoupdate.php",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param({id:"some id"})
}).success(function(data, status, headers, config) {
$scope.data = data;
}).error(function(data, status, headers, config) {
$scope.status = status;
});
}])
And, finally, my PHP:
<?php
$test = $_POST['id'];
echo $test;
?>
So, as a result, i get:
Notice: Undefined index: id on line 4
Sorry for my English, and thanks for any help!
I am new in angularjs. I am try to send a get request to my Web-Api 2 project. But I don't understand why its continuously call my method. I am following AngularJs $http for this.
Here is my error:
My Code is :
<script src="~/Scripts/jquery-2.1.0.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script>
function loginCtrl($scope, $http) {
$scope.name = function () {
console.log("Add Call");
$http({ method: 'GET', url: 'http://localhost:15229/api/values' }).
success(function (data, status, headers, config) {
console.log(data);
}).
error(function (data, status, headers, config) {
console.log(data);
});
};
}
</script>
<div lang="en" ng-app="" ng-controller="loginCtrl">
{{name()}}
</div>
You don't give enough context information for me to be sure of what you want to achieve. Especially I don't know what returns your api. So I will assume It returns the value you want to display. Your code should look more like this:
function loginCtrl($scope, $http) {
$scope.init = function () {
console.log("Add Call");
$http({ method: 'GET', url: 'http://localhost:15229/api/values' }).
success(function (data, status, headers, config) {
console.log(data);
$scope.name = data;
}).
error(function (data, status, headers, config) {
console.log(data);
});
};
}
<div lang="en" ng-app="" ng-controller="loginCtrl" ng-init="init()">
{{name}}
</div>
You should affect $scope.name in the success callback.
name should be a variable, not a function.
And the ng-init attributes defines the method to be invoked when instanciating the controller. In this case it will invoke the init() method of your controller.