Create new array from data.d.results
-
08-02-2021 - |
Domanda
I am trying to create an array with only the Name properties from a list in SP 2013. I tried using the push method but it has not worked for me. My console prints out the names in an increment style. First line has 1 name ,second 2 names, third 3 names and so on.
Here is my code:
function forLoop(){
var siteUrl = "http://site/_api/web/lists/GetByTitle('SPRestTest')/items";
$.ajax({
url: siteUrl,
type: "GET",
async: false,
headers: {
"accept": "application/json;odata=verbose"
},
success:function(data){
var arrayOfNames = [];
for(var i=0;i<data.d.results.length;i++){
var items = data.d.results[i];
arrayOfNames.push(items.Name);
}
},
error: function (err) {
console.log(err);
},
})
};
Soluzione
Please find below a better solution of what you are trying to achieve.
function forLoop(){
var siteUrl = "http://site/_api/web/lists/GetByTitle('SPRestTest')/items";
$.ajax({
url: siteUrl,
type: "GET",
async: false,
headers: {
"accept": "application/json;odata=verbose"
},
success:function(data){
var items = data.d.results;
var arrayOfNames = items.map(function(o){
return o["Name"]
});
},
error: function (err) {
console.log(err);
},
})
};
Try executing on all browsers & Please mark this as answer if it helps.
Altri suggerimenti
You describe a console.log()
statement as printing the names in "an increment style", first printing one name, then printing two names, then printing three names, etc.
If the console.log()
line that does that occurs immediately after your array.push()
line, like so:
var arrayOfNames = [];
for (var i = 0; i < data.d.results.length; i++) {
var items = data.d.results[i];
arrayOfNames.push(items.Name);
console.log(arrayOfNames);
}
then I would say that everything is working as expected, and the push
function is working for you.
Let's follow what happens in the code:
- first, you declare a variable that's an array:
var arrayOfNames = [];
- then you begin a
for
loop:for (var i = 0; i < data.d.results.length; i++) {
- now you are in the first pass of the
for
loop, andi = 0
. You usei
to get the index0
item from thedata.d.results
array:var items = data.d.results[i];
- you push the
Name
property of that first item into yourarrayOfNames
array:arrayOfNames.push(items.Name);
- then you
log
the array, which at this point only has one item in it:console.log(arrayOfNames);
- now you are at the end of the loop, so the loop restarts, but increments
i
by one, so nowi = 1
- you use
i
to get the item at index1
from the results array:var items = data.d.results[i];
- you push the
Name
property of that into your array. Now your array has 2 items in it:arrayOfNames.push(items.Name);
- you
log
your array, which now has 2 names in it. - the loop restarts, but
i
increments to2
- you get the item at index
2
from the results array - you push the
Name
property into your array, so now your array has 3 items - you
log
your array, which now has 3 names in it - etc
So you see, if the console.log
line where you are checking your array occurs inside the for
loop, then what you are describing is exactly what should be happening.
Besides putting that console.log
outside the loop, the other minor adjustment I'd make to your code is to declare the arrayOfNames
outside the scope of the success
function, so you can use it elsewhere in your code. Like this:
function forLoop() {
var siteUrl = "http://site/_api/web/lists/GetByTitle('SPRestTest')/items";
var arrayOfNames = []; // declared outside the success function
console.log('before fetching data', arrayOfNames); // will log an empty array
$.ajax({
url: siteUrl,
type: "GET",
async: false,
headers: {
"accept": "application/json;odata=verbose"
},
success: function (data) {
for (var i = 0; i < data.d.results.length; i++) {
// change "items" to "item" - singular, because that's what it is, a single item
var item = data.d.results[i];
arrayOfNames.push(item.Name);
} // end the for loop
console.log('after looping', arrayOfNames); // will log only the full, completed array
},
error: function (err) {
console.log(err);
},
});
// you can access the array outside the success function
console.log('after fetching data', arrayOfNames); // will log the same array that the 'after looping' log did
};
You should try to avoid using ajax sync calls.
Try to do whatever you want in the success callback if is posible.
function forLoop(){
var siteUrl = "http://site/_api/web/lists/GetByTitle('SPRestTest')/items";
$.ajax({
url: siteUrl,
type: "GET",
headers: {
"accept": "application/json;odata=verbose"
},
success: function (data) {
var arrayOfNames = data.d.results.map(function(item) {
return item.Name;
});
console.log(arrayOfNames) // ['name1', 'name2', ...]
doYourStuffWithArrayOfNames(arrayOfNames);
},
error: function (err) {
console.log(err);
},
})
};
function doYourStuffWithArrayOfNames(arrayOfNames) {
// do stuff...
}