I'd like to retrieve specific data within a JSON file within an ng-repeat loop, My code is as follows thus far, and it works correctly bringing in the correct low resolution url of the image. I want to display the first comment corresponding to this image from a specific user below it in the <p> tag, ie I want the the first "text" value always from the username "tellasaur". Not sure how to bring that in, could I have some help? thanks!
NG-REPEAT LOOP
<li ng-repeat="p in pics">
<img ng-src="{{p.images.low_resolution.url}}" />
<p></p>
</li>
CONTROLLER
app.controller('ShowImages', function($scope, InstagramAPI){
$scope.layout = 'grid';
$scope.data = {};
$scope.pics = [];
InstagramAPI.fetchPhotos(function(data){
$scope.pics = data;
console.log(data)
});
});
JSON
"images":{
"low_resolution":{
"url":"https:\/\/scontent.cdninstagram.com\/hphotos-xaf1\/t51.2885-15\/s320x320\/e15\/11243658_841091872640638_1858051687_n.jpg",
"width":320,
"height":320
},
},
"comments":{
"count":38,
"data":[
{
"created_time":"1436314585",
"text":"Living on a lake #amarie4107",
"from":{
"username":"tellasaur",
"profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/11142181_1606991566225969_1204610350_a.jpg",
"id":"174270894",
"full_name":"kristella"
},
"id":"1024203434844916571"
},
{
"created_time":"1436317671",
"text":"Wow",
"from":{
"username":"sbcarol2002",
"profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/10707061_359756607505353_826681437_a.jpg",
"id":"1280059782",
"full_name":"Susan Long"
},
"id":"1024229322726738700"
},
{
"created_time":"1436320519",
"text":"\ud83d\udc93 dreamyy",
"from":{
"username":"veekster",
"profile_picture":"https:\/\/igcdn-photos-h-a.akamaihd.net\/hphotos-ak-xtf1\/t51.2885-19\/11117059_1743047859255223_204225114_a.jpg",
"id":"31179150",
"full_name":"Victoria Wright"
},
"id":"1024253210688915485"
}
]
}
Here's one way to do it using a filter.
angular.module('app',[])
.filter('getFirstCommentFrom',function(){
return function(arr, user){
for(var i=0;i<arr.length;i++)
{
if(arr[i].from.username==user)
return arr[i].text;
}
return '';
}
})
.controller('TestCtrl', function($scope){
$scope.pics = [
{ "images":{
"low_resolution":{
"url":"https:\/\/scontent.cdninstagram.com\/hphotos-xaf1\/t51.2885-15\/s320x320\/e15\/11243658_841091872640638_1858051687_n.jpg",
"width":320,
"height":320
},
},
"comments":{
"count":38,
"data":[
{
"created_time":"1436314585",
"text":"Living on a lake #amarie4107",
"from":{
"username":"tellasaur",
"profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/11142181_1606991566225969_1204610350_a.jpg",
"id":"174270894",
"full_name":"kristella"
},
"id":"1024203434844916571"
},
{
"created_time":"1436317671",
"text":"Wow",
"from":{
"username":"sbcarol2002",
"profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/10707061_359756607505353_826681437_a.jpg",
"id":"1280059782",
"full_name":"Susan Long"
},
"id":"1024229322726738700"
},
{
"created_time":"1436320519",
"text":"\ud83d\udc93 dreamyy",
"from":{
"username":"veekster",
"profile_picture":"https:\/\/igcdn-photos-h-a.akamaihd.net\/hphotos-ak-xtf1\/t51.2885-19\/11117059_1743047859255223_204225114_a.jpg",
"id":"31179150",
"full_name":"Victoria Wright"
},
"id":"1024253210688915485"
}
]
}
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app" ng-controller="TestCtrl">
<li ng-repeat="p in pics">
<img ng-src="{{p.images.low_resolution.url}}" />
{{p.comments.data|getFirstCommentFrom:'tellasaur'}}
<p></p>
</li>
</div>
Related
HTML :
<div ng-repeat="data in $ctrl.list">
<div ng-init="$ctrl.applyAction(data)">
<h4>{{data.name}}</h4>
<ul ng-if="data.steps">
<li ng-repeat="step in data.steps">{{step.name}}</li>
</ul>
</div>
</div>
Controller :
$onInit() {
this.list = [{
name: "First Obj"
}, {
name: "Second Obj"
}, {
name: "Third Obj"
}, {
name: "Fourth Obj"
}];
}
applyAction(data) {
this.someHttpService.getResponse(data).then(function(success) {
data.reqForSecondServiceCall = success.data;
this.secondServiceCall(data);
}, function(error) {
// console.log(error);
});
}
secondServiceCall(data) {
this.someHttpService.getSecondServiceResponse(data).then(function(success) {
data.status = success.data;
}, function(error) {
// console.log(error);
});
}
Currently ng-repeat will be iterating through the list object irrespective of the service calls made on each object (asynchronous).
And the desired functionality is to render the current object only when the applyActions method is completed on previous object.
One solution is to queue the calls in an event queue and then invoke the events one by one when previous call is completed
angular.module('myApp',[]).controller('myCtrl', function($scope, $http, $timeout){
$scope.title = 'welcome';
$scope.finishedEvent = '';
$scope.eventQueue = [];
$scope.list = [{
name: "First Obj"
}, {
name: "Second Obj"
}, {
name: "Third Obj"
}, {
name: "Fourth Obj"
}];
$scope.applyAction = function(data, index) {
//declare the event
var event = function(){
var testApi = "https://jsonplaceholder.typicode.com/posts";
$http.get(testApi).then(function(response) {
data.steps = response.data.slice(0,2);
$scope.finishedEvent = data.name;
}, function(error) {
console.log(error);
});
};
if(index == 0){
event();
}else{
$scope.eventQueue.push(event);
}
};
$scope.$watch('finishedEvent', function(){
if($scope.eventQueue.length > 0){
$timeout(function(){
console.log($scope.finishedEvent + '- loaded')
var event = $scope.eventQueue[0];
$scope.eventQueue.splice(0, 1); //remove current event from queue
event();
}, 1000);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h1>{{title}}</h1>
<div ng-repeat="data in list">
<div ng-init="applyAction(data, $index)">
<h4>{{data.name}}</h4>
<ul ng-if="data.steps">
<li ng-repeat="step in data.steps">{{step.title}}</li>
</ul>
</div>
</div>
</body>
NOTE 1: I used a dummie api just to have live data
NOTE 2: Remove the $timeout, only added it to make the example clear
Here's a plunker with the example
I want to filter only specific data in angularjs.
here is my object,
$scope.studyTeamObj;
In this object,I have object like this
{"Study_Team": [
{
"designation": {
"Emp_Name": "mdrf",
"Emp_Id": 2,
"Designation": "Research Dietitian",
"DesignationID": 20
}
}
]
}
I want to filter like this.only two datas are enough.How can I do?
{
"Study_Team":[
{
"Emp_Id":1,
"DesignationID":20,
}
]
}
I presume you need an Angular filter without modifying the original object:
var angularApp = angular.module("app", []);
angularApp.filter("studyTeam", function(){
return function(obj){
var studyTeamArr = obj.Study_Team;
return studyTeamArr.map(function(obj){
var desig = angular.copy(obj.designation);
delete desig.Emp_Name;
delete desig.Designation;
return desig;
});
} });
angularApp.controller("angCtrl", function($scope, $filter){
$scope.studyTeamObj = {"Study_Team": [
{
"designation": {
"Emp_Name": "mdrf",
"Emp_Id": 2,
"Designation": "Research Dietitian",
"DesignationID": 20
}
}
]
};
console.log( JSON.stringify( $filter('studyTeam')($scope.studyTeamObj)) );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="angCtrl">
</div>
</div>
i have function to remove item in multiple array angularjs. i use a factory like bellow
app.factory("array_obj", function () {
var currentUserIDs = {};
currentUserIDs.data = [];
currentUserIDs.city = [];
return currentUserIDs;
});
in controller have a function like this
$scope.deleteItem = function (index) {
currentUserIDs.city.splice(index, 1);
setUserID(); //insert data in url realtime
}
this work just for one array like city
i need a function to delete any item in array_obj
function simpleController($scope) {
$scope.data = {
"results1": [ { "id": 1, "name": "Test" }, { "id": 2, "name": "Beispiel" }, { "id": 3, "name": "Sample" } ] ,
"results2": [ { "id": 1, "name": "Test2" }, { "id": 2, "name": "Beispiel2" }, { "id": 3, "name": "Sample2" } ]
}
;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app>
<body ng-controller="simpleController">
<div data-ng-repeat="results in data">
<div data-ng-repeat="result in results">>
{{result.name}}</br>
</div>
</div>
</body>
</html>
Have Fun..!!!
In your controller:
$scope.all_results = data.results1.concat(data.results2);
In your view
<whatever ng-repeat="item in all_results">{{ item.id }} - {{ item.name }}</whatever>
You could work with an extra <div> with ng-repeat attribute in your HTML where in my example results is your data.
<div>
<div ng-repeat="result in results">
<div ng-repeat="item in result">{{item.name}}</div>
</div>
</div>
ok this work ... i have function to remove item in multiple array angularjs. i use a factory like bellow
app.factory("array_obj", function () {
var currentUserIDs = {};
currentUserIDs.data = [];
currentUserIDs.city = [];
return currentUserIDs;
});
in controller have a function like this
$scope.deleteItem = function (index) {
currentUserIDs.city.splice(index, 1);
setUserID(); //insert data in url realtime
}
this work just for one array like city
i need a function to delete any item in array_obj
What i am trying to do is simple. A user enters a value, on button click, my JS calls a service to retreive my JSON data and perform a search on the value entered against the JSON and if a match is found, display the 'Owner'.
HTML:
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<input type="text" ng-model="enteredValue">
</br>
<button type="button" ng-Click="findValue(enteredValue)">Search</button>
</div>
</div>
JS:
angular.module('myApp', []).controller('MainCtrl', function ($scope, $http, getDataService) {
$scope.findValue = function(enteredValue) {
alert("Searching for = " + enteredValue);
$scope.MyData = [];
getDataService.getData(function(data) {
$scope.MyData = data.SerialNumbers;
});
}
});
angular.module('myApp', []).factory('getDataService', function($http) {
return {
getData: function(done) {
$http.get('/route-to-data.json')
.success(function(data) {
done(data);
})
.error(function(error) {
alert('An error occured');
});
}
}
});
My JSON:
{
"SerialNumbers": {
"451651": [
{
"Owner": "Mr Happy"
}
],
"5464565": [
{
"Owner": "Mr Red"
}
],
"45165": [
{
"Owner": "Mr Sad"
}
],
"4692": [
{
"Owner": "Mr Green"
}
],
"541": [
{
"Owner": "Mr Blue"
}
],
"D4554160N": [
{
"Owner": "Mr Loud"
}
]
}
}
Here's my fiddle: http://jsfiddle.net/oampz/7bB6A/
I am able to call my service, and retrieve the data from the JSON, but i am stuck on how to perform a search on my retrieved data against the value entered.
Thanks
UPDATE:
The following finds a serialnumber entered:
angular.forEach($scope.MyData, function(value, key) {
if (key === enteredValue) {
console.log("I Found something...");
console.log("Serial: " + key);
console.log("Owner: " + key.Owner);
}
})
I can display the found serialNumber via console.log("Serial: " + key); but trying to display the Owner as console.log("Owner: " + key.Owner); is showing as Undefined.
The key is just to iterate over the data object while observing the correct structure for accessing the values.
Your search function could look like this:
$scope.results = [];
$scope.findValue = function(enteredValue) {
angular.forEach($scope.myData.SerialNumbers, function(value, key) {
if (key === enteredValue) {
$scope.results.push({serial: key, owner: value[0].Owner});
}
});
};
Notice that I'm pushing the results into an array. You can setup an ng-repeat in the view which will use this to present a live view of the results:
<input type="text" ng-model="enteredValue">
<br>
<button type="button" ng-Click="findValue(enteredValue)">Search</button>
<h3>Results</h3>
<ul>
<li ng-repeat="result in results">Serial number: {{result.serial}}
| Owner: {{result.owner}}</li>
</ul>
Demo
I have a multi check box application which requires me to have multiple filters. I have been unable to use multiple filters even if I try to hard code an array to filter on. Here is an example I have created to try to make this work.
Working Example
HTML MARKUP:
<body ng-app="app">
<div ng-controller="MainCtrl">
<div ng-repeat="item in data.sessions | IndustryFilter : data.sessions.industry ">
{{item.id}}
</div>
</div>
Javascript
var app = angular.module("app", [])
.controller("MainCtrl", function ($scope, MatchedFilterList) {
$scope.data = {"sessions": [{
"id": "a093000000Vhzg7AAB",
"industry": ["Automovtive"],
"sessionName": "Keynote",
},
{
"id": "a093000000zg7AAB",
"industry": ["Automovtive", "Retail"],
"sessionName": "Keynote2",
},
{
"id": "a093er000f00zg7AAB",
"industry": ["Automovtive", "Retail", "Consumer Goods"],
"sessionName": "Keynote3",
}
]};
}).filter("IndustryFilter", function (MatchedFilterList) {
return function () {
var filtered = [];
angular.forEach(MatchedFilterList.industry, function (item) {
filtered.push(item);
});
console.log("Filter: Filter " + filtered)
return filtered;
};
})
.factory("MatchedFilterList", function(){
var matchedFilterList = {};
matchedFilterList.industry = {
"Automotive": "Automotive",
"Retail" : "Retail"
};
return matchedFilterList;
});