CODEWITHSUNDEEP
javascriptjqueryarraysjsondom
user1781710
user1781710

Reputation:

How can I put JSON data into a jQuery/Javascript array for later use?

I have some code like this:

var data = // coming in from AJAX and confirmed working, don't need to wory about this...

var row = // cloning an existing HTML structure in the DOM

for (i = 0; i < data.length; i++) {
    var rowclone = row.clone();
    var orderLastChangedTime = new Date(data[i].createDate);
    var diffDays = Math.round(Math.abs((currentTime.getTime() - orderLastChangedTime.getTime())/(oneDay)));
    rowclone.find(".home-order-calc").text(diffDays);
    rowclone.find(".home-order-status").text(data[i].status);
    rowclone.find(".home-order-po-number").text(data[i].poNumber);
    rowclone.find(".home-order-number").text(data[i].orderId);
    rowclone.find(".home-order-last-changed").text(orderLastChangedTime);
    rowclone.find(".home-order-lines").text(data[i].itemsCount);
    rowclone.find(".home-order-cost").text(data[i].cost);
    var rowstatus = rowclone.find(".home-order-status").text();
    rowstatus = rowstatus.toUpperCase();
    openJSONitems = [];
    closedJSONitems = [];
    otherJSONitems = [];
    if (status[rowstatus] == "open") {
        openJSONitems.push(rowclone);
    }
    else if (status[rowstatus] == "closed") {
        closedJSONitems.push(rowclone);
    }
    else {
        otherJSONitems.push(rowclone);
    }
    console.log(openJSONitems);
    openJSONitems.appendTo("#home-table-orders");
}

I am trying to create 3 new JavaScript arrays and array push data into them based on sort criteria from the JSON payload. Once they are sorted I want to hang on to them and attach them to the DOM on some user actions... what am I doing wrong?

Upvotes: 0

Views: 594

Answers (3)

acontell
acontell

Reputation: 6932

openJSONitems is an array, it doesn't have the appendTo method, you'll have to iterate over that array and append its elements to "#home-table-orders". Besides, you're creating a new array in each iteration. I think this changes would fix the problem. You could also avoid the last loop inserting the element directly when status[rowstatus] == "open" if you liked.

var openJSONitems = [],
closedJSONitems = [],
otherJSONitems = [];    
var data = // coming in from AJAX and confirmed working, don't need to wory about this...

var row = // cloning an existing HTML structure in the DOM

for (i = 0; i < data.length; i++) {
    var rowclone = row.clone();
    var orderLastChangedTime = new Date(data[i].createDate);
    var diffDays = Math.round(Math.abs((currentTime.getTime() - orderLastChangedTime.getTime())/(oneDay)));
    rowclone.find(".home-order-calc").text(diffDays);
    rowclone.find(".home-order-status").text(data[i].status);
    rowclone.find(".home-order-po-number").text(data[i].poNumber);
    rowclone.find(".home-order-number").text(data[i].orderId);
    rowclone.find(".home-order-last-changed").text(orderLastChangedTime);
    rowclone.find(".home-order-lines").text(data[i].itemsCount);
    rowclone.find(".home-order-cost").text(data[i].cost);
    var rowstatus = rowclone.find(".home-order-status").text();
    rowstatus = rowstatus.toUpperCase();

    if (status[rowstatus] == "open") {
        openJSONitems.push(rowclone);
    }
    else if (status[rowstatus] == "closed") {
        closedJSONitems.push(rowclone);
    }
    else {
        otherJSONitems.push(rowclone);
    }
}

console.log(openJSONitems);
for (i = 0; i < openJSONitems.length; i++) {
  $(openJSONitems[i]).appendTo("#home-table-orders");
}

Upvotes: 1

Hal Helms
Hal Helms

Reputation: 1

Have you considered using localStorage?

localStorage.setItem('openJSONitems', openJSONitems );

And retrieving it with...

var openJSONitems = localStorage.getItem('openJSONitems');

Upvotes: 0

Gary Storey
Gary Storey

Reputation: 1814

You could add then as a data element onto a DOM object.

$('body').data('openItems', openJSONitems);

And retrieve them later:

var items = $('body').data('openItems');

Upvotes: 0

Related Questions