I am trying to map the data received in the JSON to my html page using the ng-repeat, but somehow its not producing the data on the front end.my html code is as follows:
ul ng-repeat="ScheduleData in viewScheduleData"<br/>
li{{ScheduleData.day}}<br/>
ul<br/>
li{{ScheduleData.time_start}}/li<br/>
li{{ScheduleData.time_end}}/li<br/>
/ul<br/>
/li <br/>
/ul<br/>
and my scheduleCtrl.js has the code as follows:
Schedule.viewSchedule($scope.doctorprofile,function(data) {<br/>
console.log(JSON.stringify(data));<br/>
if (data.ResponseCode == 1) {<br/>
console.log("yes in");<br/>
$Scope.viewScheduleData = data.Result;<br/>
}});
I can see thee data coming through JSON stringify
Try with these
Schedule.viewSchedule($scope.doctorprofile,function(data) {
if (data.ResponseCode == 1) {
$scope.viewScheduleData = data;
}});
$Scope needs to be changed to $scope. "s" should be small.
You need to give like this.and viewScheduleData should be an array.
<ul> ng-repeat="ScheduleData in viewScheduleData">
<li>{{ScheduleData.day}}</li>
<li>{{ScheduleData.time_start}}</li>
<li>{{ScheduleData.time_end}}</li>
</ul>
Related
I have JSON data gets Vedios data of youtube list. And the following link display structure of my JSON.
<a href="https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=UUbW18JZRgko_mOGm5er8Yzg&key=AIzaSyDGm1uzuqPPUGzG-qN7u6gTaS8ApXBJYvw">
Click me to get all list videos ID ...
</a>
And here is the channel with its ID
After analyses of my JASON, I have JSON array named "items" (row 9).
Now all I need to get specific information from all units included with this array "items".
All I need to make a query using JavaScript or c# to return JSON with this specific data
title
description
thumbnails - standard
videoId
Finally, I found a solution for my problem. Not very professional but good for now.
I used Jquery selectors to extract data from my JSON object as following.
$(document).ready(function () {
var jsonLink = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=PL0zTBP9-UnPaIurxKLr3rfPZwHrFl2mEq&key=AIzaSyDGm1uzuqPPUGzG-qN7u6gTaS8ApXBJYvw&maxResults=50";
$.getJSON(jsonLink).done(function (data) {
var items = [];
$.each(data.items, function (i, item) {
items.push("<li>" + item.snippet.title + "</li>");
if (i === 5) {
return false;
}
});
$("<ul/>", {
"class": "my-new-list",
html: items.join("")
}).appendTo("body");
});
});
I just followed this
JSFiddle example to create a little search box from an array object in my javascript. Now after some tweaking and research on search.object and filter:search:strict. Now that I have it filtering correctly, I modified a checkbox in the template that is checked upon loading the document and switched on or off based on a custom data attribute in the html that is updated by the json array.
How do I run this check once someone clears the search and the old items show back up again?
In the HTML I have this template
<div ng-repeat="o in objects | filter:search:strict | orderBy:'obj_name'" class="objectContainer">
<h3>{{o.obj_name}}</h3>
<label class="userToggleSwitch" >
<input class="userToggleInput" data-isactive="{{o.obj_isactive}}" type="checkbox">
<div class="slider round"></div>
</label>
</div>
In the JS
angular.element(document).ready(function(){
angular.module('searchApp',[])
.controller('searchCtrl', ['$scope','objHolder',function ($scope,objHolder) {
$scope.search = '';
$scope.objects = [];
$scope.objects = objHolder.getobjects();
}])
// fake service, substitute with your server call ($http)
.factory('objHolder',function(){
var objects = objList;
return {
getobjects : function(){
return objects;
}
};
});
});
The JS that modifies the items on document load is using jquery like this
$(document).ready(function(){
//console.log($('.userToggleInput'));
$.each($('.userToggleInput'), function(){
if($(this).data("isactive") == 1){$(this).attr('checked', true);}
if($(this).data("isactive") == 0){$(this).attr('checked', false);}
})
$('.userToggleInput').click(function(){
if ($(this).attr('checked') == undefined) {
// THIS IS WHERE WE WILL MAKE AN AJAX CALL TO A PHP CLASS
// TO REQUEST IF THE USER CAN BE TURNED ON - DUE TO LIC RESTRICTIONS
$(this).attr('checked',true);
} else {
$(this).attr('checked',false);
}
//console.log($(this).attr('checked'));
});
});
Created JS Fiddle to assist in Helping in this manner
According to doc API we can send the data from another page to previous page as below
oNavContiner.back({
dataToSend: data
});
I have attached the event as below
<NavContainer id="navContainer" afterNavigate ="afterSelectedReferenceLayers">
in XML View, and in the controller the following method is added but data is not coming:
afterSelectedReferenceLayers : function(oControlEvent) {
if (oControlEvent.getParameter('direction') === 'back') {
console.log(oControlEvent.data);
}
}
Please help me how to get this data
As per the API, afterNavigate does not contain data sent from Nav.to and Nav.back. But its the onBeforeShow method of the the view which contains the data.
So in the onBeforeShow method, there are 2 parameters which contains data sent via .to and .back:
data: The "beforeShow" event on the target page will contain data object as "data" property sent with .to() method.
backData: The "beforeShow" event on the target page will contain data object as "backData" property sent with .back() method.
So, I would modify your code as below:
Step : Add onBeforeShow to pages ( where I need back handling)
//this.byId('p1') here refers to my page where I want onBeforeShow associated.
this.byId('p1').addEventDelegate({
'onBeforeShow':function(evt) {
if (evt.direction == 'to') {
var oData = evt.data;
console.log(oData);
} else if (evt.direction === 'back') {
var oData = evt.backData;
console.log(oData);
}
}
});
Let me know if you need additional information.
I'm not sure it is possible to use ng-init and ng-repeat in the same div. I need it to select from the database all comments that have an id of 6.
I'm calling the code here and displaying an array:
< div ng-init="getComments('6')" ng-repeat="comment in comments">{{ comment.message }}< /div>
And this is what the function looks like in the angular file:
$scope.getComments = function(statusid) {
Comment.get(statusid)
.success(function(data) {
$scope.comments = data;
$scope.loading = false;
});
};
And calling the API here:
return {
// get all the comments
get : function(statusid) {
return $http.get('/api/comments' + statusid);
},
Am I missing something simple? I did not include the PHP files as that seems to all be working fine.
I am trying to pass an object from Spring Controller to my JSP page and plan to iterate the object in JSP using JSTL. But I am unable to print the object in JSP. From the controller side, the value is sent successfully. I am thinking something is wrong in Javascript or JSP.
Request your valuable inputs. Pls find the code below,
Controller :
#RequestMapping("/changehistory/getSearchHistory.htm")
public ModelAndView getSearchHistory(#ModelAttribute(HISTORY_CRITERIA) HistoryCriteria historyCriteria,ModelMap model) {
ModelAndView mav = new ModelAndView("changehistory/changeHistory_new");
List<HistoryCriteriaResult> result=new ArrayList<HistoryCriteriaResult>();
result=changeHistoryService.getHistory(historyCriteria);
mav.addObject("historyCriteriaResult", result);
return mav;
}
JSP:
<div class="ItemListNavBoxLeft" style="margin-top: -2px; padding-left: 20px;"
id="accordianRefreshBtn">
<div class="OrangeFB" style="width: auto; " onclick="RP.getSearchHistory()">
<div class="Q2"><div class="Q8"><div class="Q4"><div class="Q6"><div class="Q1"><div
class="Q3"><div class="Q7"><div class="Q9"><div class="Q5">
<spring:message code='label.button.history'/>
</div></div></div></div></div></div></div></div></div>
</div>
</div>
<div id="changeHistorydiv" style="display:<c:choose><c:when
test='${fn:length(historyCriteriaResult) > }'>block</c:when>
<c:otherwise>none</c:otherwise></c:choose>;">
<ul class="FormBody" style="padding-left:150px;">
<li class="FormFieldTitle"></li>
id="RP.changeHist"
name="changeHist">
<c:forEach items="${historyCriteriaResult}"
var="HCList">
${HCList.code}
${HCList.name}
</c:forEach>
</ul>
</div>
JS :
RP.getSearchHistory = function() {
dojo.xhrPost({
url : "/RMT/rateplan/getSearchHistory.htm?",
timeout : 100000,
load : function(content) {
var iList = content['result'], i;
HCList.options.length = 0;
for (i = 0; i < iList.length; i++) {
HCList.options[HCList.options.length] = new Option(iList[i].name, iList[i].code);
}
},
error : function(error) {
rmt.ErrorMessage.show(error);
}
});
}
You cannot access Java variable HCList inside your JavaScript code, you have two options:
First you could return result in another JSP page and in this case you don't need to do getSearchHistory Ajax call, you can do this by defining another controller method in your controller class, check a form submission example here, check how the controller class is implemented with two methods each one corresponded to a unique JSP file
Second, If you want return historyCriteriaResult in an AJAX request, then you must convert it to JSON format, so you need to change your Java method to something like this:
#RequestMapping("/changehistory/getSearchHistory.htm")
public #ResponseBody List<HistoryCriteriaResult> getSearchHistory(#ModelAttribute(HISTORY_CRITERIA) HistoryCriteria historyCriteria) {
List<HistoryCriteriaResult> result=new ArrayList<HistoryCriteriaResult>();
result=changeHistoryService.getHistory(historyCriteria);
return result;
}
And in your JavaScript method you would parse the JSON response like this:
handleAs: "json", // This force the response to be treated as JSON
load : function(content) {
alert(content.HistoryCriteriaResultList[0].code);
alert(content.HistoryCriteriaResultList[0].name);
.
.
// or append it to any div you want
}
Note: If you are using Spring 3 or above, you need to add Jackson JSON Parser to you project classpath