I am trying to have an array of 30 recipes shown on my view with data from an API call.
// app.js
angular.module('recipeApp', [])
.controller('RecipesCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.mainview = [];
$http.get('/API')
.then(function(response) {
$scope.mainview = response.data;
});
// index.html
<html lang="en" ng-app="recipeApp">
<body ng-controller="RecipesCtrl">
{{mainview}} //this outputs the same data shown on the API call.
// when I try 'ng-repeat' nothing shows up at all
// data from API call (this is just a sample of the data. there is really an array of 30 objects in "recipes")
{
"count": 30,
"recipes": [
{
"publisher": "Closet Cooking",
"f2f_url": "http://food2fork.com/view/35382",
"title": "Jalapeno Popper Grilled Cheese Sandwich",
"source_url": "http://www.closetcooking.com/2011/04/jalapeno-popper-grilled-cheese-sandwich.html",
"recipe_id": "35382",
"image_url": "http://static.food2fork.com/Jalapeno2BPopper2BGrilled2BCheese2BSandwich2B12B500fd186186.jpg",
"social_rank": 100,
"publisher_url": "http://closetcooking.com"
},
{
"publisher": "The Pioneer Woman",
"f2f_url": "http://food2fork.com/view/47024",
"title": "Perfect Iced Coffee",
"source_url": "http://thepioneerwoman.com/cooking/2011/06/perfect-iced-coffee/",
"recipe_id": "47024",
"image_url": "http://static.food2fork.com/icedcoffee5766.jpg",
"social_rank": 100,
"publisher_url": "http://thepioneerwoman.com"
},
When I have {{mainview}} in the html, it shows the same as above, but how can I have it so all 30 recipes are looped in the view? I looked into ng-repeat, but I am very new to Angular and couldn't figure it out. Any information on this would be appreciated.
you can use ng-repeat like this:
<body ng-controller="RecipesCtrl">
<ul>
<li ng-repeat="recipe in mainview.recipes">{{recipe}}</li>
</ul>
</body>
It will generate a li element for every recipe in your array. You can access the properties of a recipe using . as you would in javascript.
{{recipe.publisher}}
Note: ng-repeat works with any elements, I used ul and li for show purposes only.
Something like this may help you:
<ul>
<li ng-repeat="recipe in mainview.recipes">
{{recipe.title}}
<br />
- {{recipe.publisher}}
</li>
</ul>
I think you're looking for a view fragment like:
<div data-ng-repeat="item in mainview.recipes">
<div>
<label>Publisher</label><span>{{item.publisher}}</span>
<div>
<div>
<label>Title</label><span>{{item.title}}</span>
<div>
...
</div>
where ... is whatever else you want to display in the view. Documentation at: https://docs.angularjs.org/api/ng/directive/ngRepeat (though I know you've read it (: )
Related
I want to display a nested JSON object in the next row of the grid. I am using Ember and mdc-layout-grid.
My JSON data is as follows:
data = [{
"amzOrderId": "403-8957866-2673902",
"financialEventType": "SHIPMENT",
"timestamp": 1570025882722,
"numOfItems": 1,
"nested": [{
"amzOrderId": "405-3430902-0842748",
"financialEventType": "SHIPMENT",
"timestamp": 1570025882722,
"numOfItems": 1}]},
{
"amzOrderId": "171-9021455-7043516",
"financialEventType": "SHIPMENT",
"timestamp": 15700258888722,
"numOfItems": 1,
"nested":null,
}]
My hbs file to render:
<li class="sales-list-row">
{{#mdc-layout-grid as |grid|}}
{{#grid.inner as |inner|}}
{{#inner.cell class="bought" span=2}}
<h3 class="bought__value">{{get data "numOfItems"}}</h3>
{{/inner.cell}}
{{#inner.cell class="purchased" span=2}}
<span class="purchased__text">Purchased</span>
<h3 class="purchased__value">{{format-date (get data "timestamp") "date"}}</h3>
{{/inner.cell}}
{{#inner.cell class="id" span=2}}
<h4 class="id__value">{{get data "amzOrderId"}}</h4>
{{/inner.cell}}
{{/grid.inner}}
{{/mdc-layout-grid}}
</li>
Now I want to render "nested" object values just in the next row if it is present (move to next data[element] in case nested is null). How do I approach this problem? I have tried a few methods but they are not working.
I hope the answer helps anyone. It was easy I added this loop at end of above HBS file:
{{#if data.nested}}
{{#each data.nested as |row|}}
{{nested-row data1=row}}
{{/each}}
{{/if}}
and the component nested-row.hbs will have the same code like the above HBS file but we need to use get data1. Hope it helps!!
Below is the JSON which I am getting and I am storing that in variable using,
JS:-
$scope.shopData = resp.data.shopVal;
On the JSP page its not working in ng-repeat tag.
JSON:-
{
"subCategoryNames": null,
"subCategorymMap": {},
"shopVal": [
{
"shopAdrs": "tex10",
"shopSrvc": "tex12",
"shopName": "tex13",
"shopWbst": "tex14"
},
{
"shopAdrs": "tex15",
"shopSrvc": "tex16",
"shopName": "tex16",
"shopWbst": "tex17"
},
{
"shopAdrs": "tex18",
"shopSrvc": "tex19",
"shopName": "tex20",
"shopWbst": "tex21"
}
],
"ownerVal": {
"ownrNumbr": "1111111111",
"ownrFName": "ABCD",
"ownrLName": "EFGH",
"ownrEmail": "ABXD305#GMAIL.COM"
}
}
JSP:-
<div data-ng-repeat="shop in shopDta">
<a>
{{shopDta.shopName}}<br>
Address: {{shopDta.shopAdrs}}<br>
Services: {{shopDta.shopSrvc}}<br>
Website: {{shopDta.shopWbst}}<br><br>
</a>
</div>
Note that $scope.shopData is correctly getting value as per JSON. Please help
Try this one, you are trying to iterate an Object using ng-repeat which is not possible, you need to get the array and put it inside ng-repeat, i have done some changes, hope this works out for you.
<div data-ng-repeat="shop in shopData.shopVal">
<a>
{{shop.shopName}}<br>
Address: {{shop.shopAdrs}}<br>
Services: {{shop.shopSrvc}}<br>
Website: {{sho[.shopWbst}}<br><br>
</a>
</div>
It should be like this :
<div data-ng-repeat="shop in shopData">
<a>
{{shop.shopName}}<br>
Address: {{shop.shopAdrs}}<br>
Services: {{shop.shopSrvc}}<br>
Website: {{shop.shopWbst}}<br><br>
</a>
</div>
try this, you are trying to iterate an Object using ng-repeat which is not possible, you need to get the array and put it inside ng-repeat, i have done some changes, hope this works out for you.
<div data-ng-repeat="shop in shopData">
<a>
{{shop.shopName}}<br>
Address: {{shop.shopAdrs}}<br>
Services: {{shop.shopSrvc}}<br>
Website: {{shop.shopWbst}}<br><br>
</a>
</div>
This should be a very simple thing to do. I am building an IONIC app with a JSON data file. The data is something like this.
[
{ "id": 1,
"name": "John",
"type": "male",
"bio": "this is John"
},
{ "id": 10,
"name": "Mary",
"type": "female",
"bio": "this is Mary"
}
]
Now I want to filter by by "type" in the data and then loop the data by "id".
<ion-list ng-repeat="person in people | filter: {'type': 'male'}">
<ion-item href="#tab/people/males/{{ person.id }}">{{ person.name }}
</ion-item>
</ion-list>
The Controller for this is:
.controller('PeopleController', ['$scope', '$state', '$http', function($scope, $state, $http){
$http.get('data/people.json').success(function(data){
$scope.people = data;
$scope.whichPerson = $state.params.id;
}),
}])
This displays the required data of males only by name.
However if I want to see the individual bio using the following code
<div class="card" ng-repeat="person in people | filter: { id: whichPerson }">
<h2>{{ person.name }}</h2>
<p>{{ person.bio}}</p>
</div>
When I click the individual item for each person to display person.bio I get both John and Mary.'
I figured this was because the "id" is 1 and 10 which seems to be parsing as a string to the controller. I tried putting this
"id": "1" and "id": "10"
Did not work. I did this in the controller
$scope.whichPerson = parseInt($state.params.id, 10);
This does not work either. I am totally stumped. How do I get the individual id's from the data? In fact I noticed that I can change the id to 11 or 12 or 13 etc and it still returns both records?
Any help appreciated.
Try to add the comparator :true to your filter as described in the documentation. This forces a strict comparison of the filter value instead of just checking if the data contains it.
Given the above doesn't work, you could try a custom filter by doing:
filter: { id: whichPerson }:sameID
and then in your controller:
$scope.sameID = function(actual, expected) {
return parseInt(actual) === parseInt(expected)
};
Even if this doesn't work, you could then at least debug within the custom filter to see where the comparison is failing
I've come across something so bizarre. I had this below set up to read from a data.json file. It should show up a list of people. Instead it's ignoring the json file and is reading out non existing words! I just want it to read from data.json. Even if I delete "data.json" , the search function still prints out these words which don't exist.
As you can see from the photo, it's showing up a list of words that I DO NOT have stored anywhere in my code or on my server. It's puzzling me.
<body ng-app="personApp">
<div class="container">
<header></header>
<div ng-controller="PersonListCtrl">
<div class="bar">Search:
<input ng-model="query">
</div>
<ul class="">
<li ng-repeat="person in persons | filter:query">{{person.name}}</li>
and
var personApp = angular.module('personApp', []);
personApp.controller('PersonListCtrl', function ($scope, $http) {
$http.get('js/data.json').success(function (data) {
$scope.persons = data;
})
});
data.json
[{
"name": "Mike Doe"
}, {
"name": "Jhon Doe"
}, {
"name": "Sam Doe"
}, {
"name": "Sam Doe"
}, ];
Go to browser console -> Network.
Most probably you will see 304 status of your request, that means ajax request was cached by browser. Either clean cache, add query string to request etc.
I am new to angular and trying to integrate it within my application. I am attempting to use a simple $http.get to a .JSON file, which displaying the matching contents in a ng-repeat
Here my get:
$scope.countries = [];
$http.get('/resources/data/countries-report.json').success(function(data) {
$scope.countries = data.countries;
// alert(JSON.stringify($scope.countries));
console.log(data.countries);
console.log(data.countries.population);
}).error(function(error) {
alert('error');
});
Here's my .JSON file:
{
"firstName" : "Joe",
"surName" : "Bloggs",
"countries" : [
{ "name": "France", "population": "63.1" },
{ "name": "Span", "population": "52.3" },
{ "name": "United Kingdom", "population": "61.8" }
]
}
Here is my HTML:
<li ng-repeat="country in countries">
{{country.name}} has population of {{country.population}}
</li>
When viewing in the browser, all that is displayed is:
has population of
has population of
has population of
It seems as though my code can see there are 3 countries, as when i add or remove from my .JSON file, the list in the HTML modifies accordingly, however, the contents of the .JSON is not displaying.
Have i forgot to return the data from my .get??
** UPDATE *************************
As some have mentioned, my code seems to be correct, i think i know what the problem may be.
My application makes use of a HTML templating structure using Swig which accesses .JSON file using {{ }}.. Could this be causing confusion with Angular?
** UPDATE *************************
If i change:
var app = angular.module("app", []);
to
var app = angular.module('app', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
}
);
And:
<li ng-repeat="country in countries">
{{country.name}} has population of {{country.population}}
</li>
To:
<li ng-repeat="country in countries">
{[{country.name}]} has population of {[{country.population}]}
</li>
Then the correct values are displayed.
you have to get the data in the array of object form like
[
{
id:1,
ima:gh.jpg,
data:
[
{
anotherid:1,
my:w,
ki:y
}
]
},
{
id=2,
ima:jh.jpg
}
]