How to add a Array to a Javascript Variable

Question

simple question for most of you i think;-) i have an array (from a Sharepoint List) this Array shows like this if i write it via .html into a DIV:

{name="Drittes Kapitel"text="uiuiui"value="45.0000000000000"}
{name="Ein anderer Titel"text="Ein zweiter Text"value="123.000000000000"}
{name="Ein Titel"text="Das ist der Text"value="256.000000000000"}

my Code to bring this up into a DIV is the following:

function AddContent(name,text,value)
{    $("#meineListe").append('{name="'+ name + '"text="' + text + '"value="'+ value +'"}<br />');
                                
}

so it shows me up all 3 Elements in this Array But how can i put the array into a Variable? if i try to

function AddElements(name,text,value)
{   MyElements = ('{name="'+ name + '"text="' + text + '"value="'+ value +'"}<br />');
	console.log(MyElements);
	$("#meineListe").html(MyElements);
                                
}

it shows me just the first entry of them... i did not understand what happend here exactly.

Whole Code (from sharepointhillbilly):

//this is where the script starts after the page is loaded
$(document).ready(function() { 

    GetMyListData();

});

function GetMyListData()
{
        //The Web Service method we are calling, to read list items we use 'GetListItems'
        var method = "GetListItems";
        
        //The display name of the list we are reading data from
        var list = "MyList";

        //We need to identify the fields we want to return. In this instance, we want the Name (Title),
        //Blog, and Picture fields from the Speakers list. You can see here that we are using the internal field names.
        //The display name field for the Speaker's name is "Name" and the internal name is "Title". You can see it can 
        //quickly become confusing if your Display Names are completely differnt from your internal names. 
        //For whatever list you want to read from, be sure to specify the fields you want returned. 
        var fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='Title' />" +
                                "<FieldRef Name='treo' />" +
                                "<FieldRef Name='iz1y' />" +
                            "</ViewFields>";
                            
        //this is that wonderful CAML query I was talking about earlier. This simple query returns
        //ALL rows by saying "give me all the rows where the ID field is not equal to 0". I then 
        //tell the query to sort the rows by the Title field. FYI: a blank query ALSO returns
        //all rows, but I like to use the below query because it helps me know that I MEANT to 
        //return all the rows and didn't just forget to write a query :)
        var query = "<Query>" +
                        "<Where>" +
                            "<Neq>" +
                                "<FieldRef Name='ID'/><Value Type='Number'>0</Value>" + 
                            "</Neq>" +
                        "</Where>" +
                        "<OrderBy>" + 
                            "<FieldRef Name='Title'/>" +
                        "</OrderBy>" +
                    "</Query>";

        //Here is our SPServices Call where we pass in the variables that we set above
        $().SPServices({
                operation: method,
                async: false,  //if you set this to true, you may get faster performance, but your order may not be accurate.
                listName: list,
                CAMLViewFields: fieldsToRead,
                  CAMLQuery: query,
                      //this basically means "do the following code when the call is complete"
                    completefunc: function (xData, Status) { 
                        //this code iterates through every row of data returned from the web service call
                        $(xData.responseXML).SPFilterNode("z:row").each(function() { 
                            //here is where we are reading the field values and putting them in JavaScript variables
                            //notice that when we read a field value there is an "ows_" in front of the internal field name.
                            //this is a SharePoint Web Service quirk that you need to keep in mind. 
                            //so to read a field it is ALWAYS $(this).attr("ows_<internal field name>");
                            
                            //get the title field (Element Title)
                            var name = ($(this).attr("ows_Title"));
							var text = ($(this).attr("ows_treo"));
							var value = ($(this).attr("ows_iz1y"));
                            
                            //get the blog url, SharePoint stores a url in the form of <url><comma><description>
                            //We only want the <url>. To accomplish this we use the javascript "split" function
                            //which will turn <url><comma><description> into an array where the first element [0]
                            //is the url.   Catch all that? if you didn't this is another reason you should be
                            //a developer if you are writing JavaScript and jQuery :)
                            //var blog = ($(this).attr("ows_Blog")).split(",")[0];
                            
                            //same thing as the blog, a picture is stored as <url><comma><alt text>
                            //var pictureUrl = ($(this).attr("ows_Picture")).split(",")[0];
                            
                            //call a function to add the data from the row to a table on the screen
                            AddElements(name,text,value);
                            
                        });                
                    }
        });

}

// very simple function that adds a row to a table with the id of "speakerTable" 
// for every row of data returned from our SPServices call. 
// Each row of the table will display the picture of the speaker and
// below the speaker's picture will be their name that is a hyperlink
// to the speaker's blog.
function AddRowToTable(name,text,value)
{   MyElements = ('{name="'+ name + '"text="' + text + '"value="'+ value +'"}<br />');
	console.log(MyElements);
	$("#meineListe").html(MyElements);
                                
}

<!-- table where our listContent rows will go -->
<div id="meineListe"></div>

any suggestions?

i need this array in a JS Variable. is there another solution as in .append to add an array into a varaible?

Andrew Mairose · Accepted Answer · 2015-11-16 16:31:41Z

1

$('#meineList').append(item); will append item to your element with the id of meineList, while $('#meineList').html(item); will replace any html inside of your element with the id of meineList with the item that you pass in.

I assume you call AddContent() or AddElements() for each of the items, which is the reason why when you call AddElements(), it will display your first element, then replace it with the second, then replace it with the third, thus showing only the final element that you pass to it. So, you should definitely use the AddContent() function, so that all of your items will be displayed.

To add each item you pass in to an array, you will need to create an array outside of the function, then add a new element to it each time you call your function.

EDIT:

Looking at your full code, your AddRowToTable() function should be called for each of the elements you want to add, so if you call .html() inside the function, you will only get the last element output.

Instead, just add the element to the array in your AddRowToTable() function, then print out the contents of the array after your GetMyListData() function is complete.

Try changing your code to something like this (I removed the comments for better readability):

var arr = [];

$(document).ready(function() {
  GetMyListData();
  $('#meineList').html(arr.toString());
});

function GetMyListData() {
  var method = "GetListItems";
  var list = "MyList";

  var fieldsToRead = "<ViewFields>" +
    "<FieldRef Name='Title' />" +
    "<FieldRef Name='treo' />" +
    "<FieldRef Name='iz1y' />" +
    "</ViewFields>";

  var query = "<Query>" +
    "<Where>" +
    "<Neq>" +
    "<FieldRef Name='ID'/><Value Type='Number'>0</Value>" +
    "</Neq>" +
    "</Where>" +
    "<OrderBy>" +
    "<FieldRef Name='Title'/>" +
    "</OrderBy>" +
    "</Query>";

  $().SPServices({
    operation: method,
    async: false,
    listName: list,
    CAMLViewFields: fieldsToRead,
    CAMLQuery: query,
    completefunc: function(xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {

        var name = ($(this).attr("ows_Title"));
        var text = ($(this).attr("ows_treo"));
        var value = ($(this).attr("ows_iz1y"));

        AddRowToTable(name, text, value);
      });
    }
  });
}

function AddRowToTable(name, text, value) {
  arr.push({'name': name, 'text': text, 'value': value});
}

edited Nov 16, 2015 at 16:31

answered Nov 16, 2015 at 14:13

Andrew Mairose

11.1k15 gold badges62 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marco Over a year ago

okey... but that doesn't change anything... :-/ it just shows me the first entry

Andrew Mairose Over a year ago

See my edit. I think you were still trying to use .html() in the wrong place.

Marco Over a year ago

ok it works ;-) Thanks a lot - now i have to fight with sharepoint / to bring all together... but thats another story to complete, my arr.push: arr.push('{id:' + id + ', label:"' + name +'", description:"' + desc + '", value:"' + value + '", color:'+ color +'}');

Ronen Cypis · Accepted Answer · 2015-11-16 14:10:41Z

0

Your AddRowToTable should really use $('#meineListe').append() and NOT $('#meineListe').html(). This would APPEND the data to the existing html in it, rather than just override it (using .html()).

answered Nov 16, 2015 at 14:10

Ronen Cypis

21.5k1 gold badge22 silver badges25 bronze badges

3 Comments

Marco Over a year ago

with .append it works but finally i don't want this arraya inside of a HTML - i need to have the whole array in a JS Variable... $('#meineListe').html() is just for me to show what is in this variable MyElements right now...

Ronen Cypis Over a year ago

If What you're trying to do is to create an Array, and then adding items to it, the, you should read about Array.push function. var arr = []; and then arr.push({name: "Borat", age: 42});

Marco Over a year ago

Hi Ronan, Andrews Solution was fine for me unfortunately i have now a problem with the semicolons but in fact its working with arr.push as you also describe... thanks for your help

Collectives™ on Stack Overflow

How to add a Array to a Javascript Variable

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related