Access name column elements from a Sharepoint list using REST - javascript

I am using the following code to pull back items from a SharePoint List
function getItems(url) {
return $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + url,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
}
});
}
getItems( "/_api/Web/Lists/GetByTitle('Reporting%
20Listing')/Items" ).done(function(data){
data.d.results.forEach(function(item){
console.log( item.ID, item.Title, item.ApprovalName,
item.ApprovalDate );
});
});
This is working fine except item.ApprovalName is not returning any value.
Do I need to somehow reference which element of the ApprovalName array that I want? I've looked through several reference but don't see an example.

Sample demo to expand multiuser field.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
SP.SOD.executeOrDelayUntilScriptLoaded(GetListItems, "sp.js");
function GetListItems() {
var apiPath = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('MyList3')/items?$select=Title,MultiUsers/Name,MultiUsers/EMail&$expand=MultiUsers";
$.ajax({
url: apiPath,
headers: {
Accept: "application/json;odata=verbose"
},
async: false,
success: function (data) {
if (data != null) {
for (var i = 0; i < data.d.results.length; i++) {
console.log(data.d.results[i].Title);
for (var j = 0; j < data.d.results[i].MultiUsers.results.length; j++) {
console.log(data.d.results[i].MultiUsers.results[j].Name);
}
}
}
},
eror: function (data) {
console.log("An error occurred. Please try again.");
}
});
}
</script>

Related

ASP.NET MVC - After HTML append with Jquery the DropDownList value comes as undefined

I have two dropdownlist and when I change the value of the first one with refreshes the value of the second one with the following code:
function FillBooks(val) {
$("#ddl_dep").attr("class", "form-group");
$("#Help1").css("visibility", "hidden");
var CategoryId = val;
//console.log(CategoryId);
console.log(CategoryId)
$("#DDL_TIPO").empty();
$.ajax({
url: '#Url.Action("UpdateTipo", "Tickets")',
type: "POST",
dataType: "JSON",
data: { value: CategoryId },
success: function (data) {
var markup = "<option value='0'>Selecione um Tipo</option>";
for (var x = 0; x < data.length; x++) {
markup += "<option value=" + data[x].value + ">" + data[x].Text + "</option>";
}
$("#DDL_TIPO").html(markup).show();
}
});
}
P.S - The data comes from the controller which is not relevant for the exemple that I am showing.
After this when I try to get the value of the Second dropdownlist it comes as undefined.
I tested before this jquery code and it gives me the value of the dropdownlist, it just doesn't give when I get this function to work on it.
Try this:
<script>
function FillBooks(val)
{
$("#ddl_dep").attr("class", "form-group");
$("#Help1").css("visibility", "hidden");
var CategoryId = val;
//console.log(CategoryId);
console.log(CategoryId)
$.ajax
({
url: '#Url.Action("UpdateTipo", "Tickets")',
type: 'POST',
datatype: 'application/json',
contentType: 'application/json',
data: { value: CategoryId },
success: function(result)
{
$("#DDL_TIPO").html("");
$.each($.parseJSON(result), function(i, tipo)
{
$("#DDL_TIPO").append($('<option</option>').val(tipo.Value).html(tipo.Text))
})
},
error: function()
{
alert("Whooaaa! Something went wrong..")
},
});
}
</script>

How to display JSON using ajax

I want to display the value based on selected value on drop down list with using Get method of Ajax from the url,
based on schema i have to add the value of selected item to the meddle of url and then i can get the relative data from the server:
this is my code:
$.ajax({
type: 'GET',
url: 'url',
success: function(data) {
for (var i = 0; i < data.length; i++) {
$("#tbl2").append("<option>"+data[i]+"</option>");
}
}
});
var one = 'http://gate.atlascon.cz:9999/rest/a/';
var middle = $('#tbl2 :selected').text(); // it should be the selected item from last get method
var end = '/namespace';
var url_t = one + middle + end ;
$.ajax({
type: 'GET',
url: url_t,
success: function(data2) {
$("#text-area").append(data2);
}
but it is not work!
i am new in programming, could you please help me.
thanks.
try this:
$.ajax({
type: 'GET',
url: 'url',
success: function(data) {
for (var i = 0; i < data.length; i++) {
$("#tbl").append("<tr><td>"+data[i]+"</td></tr>");
}
}
});
Add this in your ajax success():
data.forEach(function(item) {
$("#tbl").find('tbody')
.append($('<tr>')
.append($('<td>').text(item))
);
})

Ajax URL error unknown

<html>
<head>
<meta charset="utf-8"/>
<script src="../JQUERY/jquery-1.11.0.js"></script>
<script>
function getOptions()
{
var html=new String();
$.ajax(
{
//url: 'http://server.com/?method=get&search=menu_group_options_with_items&type=group&group_id=6&format=json',
url: 'http://server.com',
data:
{
'method': 'get',
'search': 'menu_group_options_with_items',
'type': 'group',
'place_id': '6',
'format': 'json'
},
dataType: 'jsonp',
async: false,
success: function (data)
{
alert("function");
//var data = JSON.parse(data);
var h=new String();
for(var i=0;i<data.length;i++)
{
h+='<div class="data">';
h+=data[i]['group_option'].OptionsID+'<br>';
h+=data[i]['group_option'].MenuGroupID+'<br>';
h+=data[i]['group_option'].group_options_name+'<br>';
h+=data[i]['group_option'].menu_group_option_information+'<br>';
h+=data[i]['group_option'].menu_group_option_min_selected+'<br>';
h+=data[i]['group_option'].menu_group_option_max_selected+'<br>';
h+=data[i]['group_option'].fDateAdded+'<br><br><br>';
for(var iter = 0; iter < data[i]['group_option']['group_option_items'].length; iter++)
{
h+=data[i]['group_option']['group_option_items'][iter]['item'].OptionItemID+'<br>';
h+=data[i]['group_option']['group_option_items'][iter]['item'].menu_item_option_name+'<br>';
h+=data[i]['group_option']['group_option_items'][iter]['item'].menu_item_option_additional_cost+'<br>';
h+='<br><br><br>';
}
h += '</div>';
}
alert("h");
alert(h);
alert("html equals ");
html=h;
alert(html);
}
});
alert("returning html");
alert(html);
return html;
}
</script>
<script>
$(document).ready(function()
{
var str="";
str=getOptions();
$('#content').append(str);
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
When I would run this using the full URL nothing would happen. I wouldn't get any information back. Now that I've changed my URL just to http://server.com and set the data:{} to the requirements from the URL, I still get nothing. At this point I'm stuck and don't know where else do go.
My Questions:
What would be a reason my code isn't working?
What else do I need to do to retrieve data from the website?
async:false is deprecated after jQuery 1.8. Either use older jQuery version change your code.
To change your code, move this part into the success function:
$('#content').append(str);
I hope this helps.
Thanks
function getOptions()
{
$.ajax(
{
url: 'http://server.com/',
data:
{
'method': 'get',
'search': 'menu_group_options_with_items',
'type': 'group',
'place_id': '6',
'format': 'json'
},
dataType: 'jsonp',
success: function (data)
{
alert("function");
//var data = JSON.parse(data);
var h=new String();
for(var i=0;i<data.length;i++)
{
h+='<div class="data">';
h+=data[i]['group_option'].OptionsID+'<br>';
h+=data[i]['group_option'].MenuGroupID+'<br>';
h+=data[i]['group_option'].group_options_name+'<br>';
h+=data[i]['group_option'].menu_group_option_information+'<br>';
h+=data[i]['group_option'].menu_group_option_min_selected+'<br>';
h+=data[i]['group_option'].menu_group_option_max_selected+'<br>';
h+=data[i]['group_option'].fDateAdded+'<br><br><br>';
for(var iter = 0; iter < data[i]['group_option']['group_option_items'].length; iter++)
{
h+=data[i]['group_option']['group_option_items'][iter]['item'].OptionItemID+'<br>';
h+=data[i]['group_option']['group_option_items'][iter]['item'].menu_item_option_name+'<br>';
h+=data[i]['group_option']['group_option_items'][iter]['item'].menu_item_option_additional_cost+'<br>';
h+='<br><br><br>';
}
h += '</div>';
}
alert("h");
alert(h);
alert("html equals ");
html=h;
alert(html);
$('#content').append(html);
}
});
alert("returning html");
alert(html);}

Jquery Mobile - onclick not working

The function occurs before anything is clicked...
such as
When i click the name ^ fdsa, for exampmle, i need the id to pop up, but it automatically happens when the page is loaded for some reason
HTML
<ul data-role="listview" id="ccontent" data-inset="true">
</ul>
JS
function getClubs() {
$.ajax({
url: 'some url',
crossDomain: true,
type: 'post',
data: '',
success: function (data) {
$('#ccontent').empty();
var json = jQuery.parseJSON(data);
for (var i = 0; i < json.length; i++)
$('#ccontent').append('<li>' + json[i].name + '</li>');
$('#ccontent').listview('refresh');
},
});
}
function getData(id) {
$('#clubcontent').append ('<li>'+id+'</li>');
$('#clubcontent').listview('refresh');
};
I think this is what you're looking for:
$(document).on('click', '#ccontent li a', function () {
getData($(this).data('club-id'));
});
function getClubs() {
$.ajax({
url: 'some url',
crossDomain: true,
type: 'post',
data: '',
success: function (data) {
$('#ccontent').empty();
var json = jQuery.parseJSON(data);
for (var i = 0; i < json.length; i++)
$('#ccontent').append('<li>' + json[i].name + '</li>');
$('#ccontent').listview('refresh');
}
});
}
.on() is used instead of an inline onclick event. club-id is used to store the id which is used in the getData() function.

Json data from Guardian API

I have a guardian json data feed that I want to pull into my page online.
http://content.guardianapis.com/world/cuba?format=json&show-fields=trail-text%2Cheadline&order-by=newest&api-key=c3rr449rqqebmuxua9k5mdcz
I have used this javascript but nothing seems to be working to grab the right content from the json;
$(document).ready(function() {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "http://content.guardianapis.com/world/cuba?format=json&show-fields=trail-text%2Cheadline&order-by=newest&api-key=c3rr449rqqebmuxua9k5mdcz",
success: function(data) {
for (var i = 0; i < 12; i++) {
$("#cuban-news").append("<div class='guardian'><a target='_blank' href='" + webTitle + "'>Link</a></div>");
}
console.log(data);
}
});
});
This is not throwing anything in terms of errors.
Am I better using a js service like backbone or underscore?
Any help would be amazing on this.
Use
data.response.results[i].webTitle
instead of
webTitle
error was
Uncaught ReferenceError: webTitle is not defined
$(document).ready(function() {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "http://content.guardianapis.com/world/cuba?format=json&show-fields=trail-text%2Cheadline&order-by=newest&api-key=c3rr449rqqebmuxua9k5mdcz",
success: function(data) {
for (var i = 0; i < data.response.results.length; i++) {
$("#cuban-news").append("<div class='guardian'><a target='_blank' href='"
+ data.response.results[i].webTitle + "'>Link</a></div>");
}
console.log(data);
}
});
});​
JSFiddle

Categories

Resources