Saving and loading arrays / objects via AJAX calls, JSON stringify question

Question

I'm saving a bunch of variables, arrays, and objects with an ajax call and then loading them later. There are a lot of them. Do I have to save each property individually? Like this:

function save() {

    var saveData = [
        [obj1.a, obj1.b, obj1.c, obj1.d, obj1.e],
        [obj2.a, obj2.b, obj2.c, obj2.d, obj2.e],
        [obj3.a, obj3.b, obj3.c, obj3.d, obj3.e]
    ];

    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "./api/save", true);
    xhttp.setRequestHeader('Content-type', 'application/json');
    xhttp.send(JSON.stringify(saveData));
}

Or is there any shorter way? Can I JSON.stringify the individual objects and then send them? Like this:

    var saveData = [
        [JSON.stringify(obj1)],
        [JSON.stringify(obj2)],
        [JSON.stringify(obj3)]
    };

RESPONSE:

Yes that is what I was looking for. I was not getting it to load correctly when I called the data back from the server, so I thought maybe you couldn't send "whole" objects like that.

For example once I load the data from the server and parse it, shouldn't I be able to access it in the same way?

var loadedData = JSON.parse(this.responseText);

console.log(loadedData[1]["b"]);

should give me the same result as:

console.log(obj2["b"]);

yes?

That brings me to the second part of the question. Loading a bunch of variables, arrays, objects... is there an easy way to do that? Like if I want to overwrite the local values with the values loaded from the server? Can I go:

obj1 = loadedData[0];

Or do I have to go through and set the properties one by one? like:

obj1[0] = loadedData[0][0];
ojb1[1] = loadedData[0][1];

etc? (or with a loop)

I want to send all of the data. So obj1 might be {a: "red", b: "blue", c: "green", d: "white"}. arr1 could be [1,1,2,2,3,3,4,4,4,5,5,5,6,6,6,7,7,7,8,9,9,9,9,10,10,10]. I'd rather not have to send obj1.a, obj1.b, obj1.c, obj1.d, and arr1.0, arr1.1, arr1.2, arr1.3, and on and on and on.. — Jack Chandelier
– Jack Chandelier, Commented Feb 13, 2021 at 2:46

CertainPerformance · Accepted Answer · 2021-02-13 02:46:43Z

2

If you want to save all the data, I'd suggest just listing each object in an array:

const saveData = [obj1, obj2, obj3];

Then doing xhttp.send(JSON.stringify(saveData)); will send the contents of all 3 objects. The data structure is not the same as what you're doing currently, but it'll be a better approach than an array of arrays in most cases.

Other suggestions:

If your objects really are numerically indexed, then instead of having lots of standalone objects, I'd highly recommend having a single array that contains all the objects instead, eg:

const data = [
  /* contents of obj1 */,
  /* contents of obj2 */,
  /* contents of obj3 */,
];

etc. Then all you have to do to send it all is

xhttp.send(JSON.stringify(data));

If your objects are not all numerically indexed, consider sending a single object containing the sub-objects instead, eg:

const data = {
  obj1: /* contents of obj1 */,
  obj2: /* contents of obj2 */,
};

Again, it's not the same data structure as your original code, but it'll probably be easier to work with if you want to load them later.

answered Feb 13, 2021 at 2:46

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

1 Comment

Jack Chandelier Over a year ago

I see what my problem was. When I tried saving an array of objects originally I then tried recalling one value, like console.log(loadedData[2][1]) and it came back undefined. But when I instead loaded it like, loadedData[2]["b"] it worked. Not sure why it wouldn't work the first way though.. ?

REDRUM · Accepted Answer · 2021-02-13 02:44:30Z

-1

You can do it like this with jquery

$.ajax({ 
 type: "POST", 
 url: "./api/save", 
 data: {data:JSON.stringify(saveData)},
 dataType: 'json',
});

answered Feb 13, 2021 at 2:44

REDRUM

96 bronze badges

Collectives™ on Stack Overflow

Saving and loading arrays / objects via AJAX calls, JSON stringify question

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related