Need to iterate through stored json objects in local storage array of json data

Question

I looked at Iterate through nested json object array and some other posts, but they don't seem to be explaining my situation.

The issue I am having here is that I am having to store multiple JSON objects into an array to local storage in the event the client's form goes offline and needs to store multiple submissions into local storage; so when the connection is re-established, it will iterate through all the localstorage data and submit each JSON object separately into new rows into the SQL DB.

All I have are arrays of JSON objects being stored into a localstorage array, but I can't seem to return each "{...}" object separately, I can only get a single value of the array string using offlinExtractData[3] (returns "c" of "cable_no") instead of being able to get the first JSON Object in the array of multiple objects.

Example, a complete JSON object that will submit to the SQL DB looks like this, which is then sent to PHP SQL file via AJAX:

{"cable_no":"90012","section_no":"1","extract_ft":"1","cable_status":"","conduit_status":"None","extract_date":"2013-09-26","extraction_team":" ","extract_notes":"1"}

That is one row of data, but this is what my local storage will look like after multiple form submissions:

[{"cable_no":"90012","section_no":"1","extract_ft":"1","cable_status":"Done","conduit_status":"None","extract_date":"2013-09-26","extraction_team":" ","extract_notes":"1"},
{"cable_no":"90012","section_no":"1","extract_ft":"2","cable_status":"Done","conduit_status":"Liner 2","extract_date":"2013-09-26","extraction_team":"E1","extract_notes":"2"},
{"cable_no":"90012","section_no":"1","extract_ft":"3","cable_status":"Done","conduit_status":"Liner 2","extract_date":"2013-09-26","extraction_team":"Unknown","extract_notes":"3"},
{"cable_no":"90012","section_no":"4","extract_ft":"4","cable_status":"Done","conduit_status":"Liner 2","extract_date":"2013-09-26","extraction_team":"Unknown","extract_notes":"4"},
{"cable_no":"90012","section_no":"1.2.3","extract_ft":"333","cable_status":"Done","conduit_status":"Liner 2","extract_date":"2013-09-26","extraction_team":"Unknown","extract_notes":"5"}]

each {...},{...},{...} JSON Object has its own unique row of data, and I need to be able to return each {...} accordingly and separately to submit through my AJAX function which I already have set up. My question is how can I iterate through each object in order to return the whole piece of data, not just bits of the whole string? Does that make sense?

Here is the code that spits out the above data:

//Global variables
var extractform = {
'cable_no' : "",
'section_no' : "",
'extract_ft' : "",
'cable_status' : "",
'conduit_status' : "",
'extract_date' : "",
'extraction_team' : "",
'extract_notes' : ""
}

//initially set up the store
if (!localStorage["Extract_Update"] ) {
localStorage["Extract_Update"] = JSON.stringify([]);
}
//Now return locally stored values, if set
if (localStorage["Extract_Update"]) {
var offlinExtractData = localStorage["Extract_Update"];
console.log("Array Length: " + localStorage["Extract_Update"].length + "\nParsed Data: " + offlinExtractData);
console.log(offlinExtractData[3]);
}

function update_extractform() {
$.ajax({
    type: 'POST',
    //url: './php/update_extractform.php',
    timeout: 8000, //8 seconds
    data: extractform,
    success: function(data) {
                //Save data (array) and push new data into existing web storage
                var aa = JSON.parse( localStorage["Extract_Update"] );
                console.log( aa );
                aa.push( [ extractform ] );
                localStorage["Extract_Update"] = JSON.stringify( aa );
                console.log("Submitted (offline): " + localStorage["Extract_Update"]);
}

If I'm understanding correctly, you're pushing an `Array` into the "Extract_Update" `Array` for each form submission. That seems unnecessary - why not just push the form data itself, which is already in an `Object` format? `aa.push(extractform)` — providencemac, Sep 26 '13 at 22:26
This seems like a very long, complex explanation of what is probably a very simple question. Can you simplify to *just* the code question you have? — Hamish, Sep 26 '13 at 22:28
Thanks for that catch, providence. Sorry for the long explanation, figured I should create context. Basically, the console log of offlinExtractData[3] returns just "c" from the first JSON object's {"cable_no":"90012"......}, I would like offlinExtractData[3] to return the third JSON object as a whole, so that I'd get {"cable_no":"90012","section_no":"1","extract_ft":"3","cable_status":"Done","conduit_status":"Liner 2","extract_date":"2013-09-26","extraction_team":"Unknown","extract_notes":"3"} instead. How can I do this? Thanks!! — jflay, Sep 26 '13 at 23:21
Another question is localStorage["Extract_Update"].length will return 893 as it counts every character in the array... I would prefer the count to go through each object in the array, not character. So I was hoping to get a returned length value of 5 for the example I provided storing multiple submissions. So again, to clarify, I would like to be able to run through each object, not character, of the array. Because offlinExtractData[3] is only stepping through each character in the JSON string, but I want it to step through each object of the JSON data stored in localStorage. — jflay, Sep 26 '13 at 23:33

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

If you have a string representation of a JSON object, one way to turn it into a javascript object to iterate through is:

eval(offlinExtractData)[3]

In IE 8+, Firefox 3.1+, Safari 4+, Chrome 3+, and Opera 10.5+ (based on Browser-native JSON support (window.JSON)) you can also avoid eval by using:

JSON.parse(offlinExtractData)[3]

For even more support, you could also use an external JSON parser such as https://github.com/douglascrockford/JSON-js/blob/master/json2.js

edited May 23 '17 at 12:13

Community

1
1

answered Sep 26 '13 at 23:32

Bemmu

17,849
16
76
93

man you rock! It was SO simple... of course, parse the json string... I am new to JSON, but know enough to where I feel stupid about missing that. Now I can just use eval(offlinExtractData).length to return "5" and there's my count function? – jflay Sep 26 '13 at 23:45
Sort of new question, maybe need to create a new topic: Now how can I begin clearing out each json object from the localstorage as it iterates through each one? My for loop will clear all localstorage before it is able to iterate through each object. I am only setting the single item of "Extract_Data", so it doesn't seem possible to remove specic content within the localstorage item. – jflay Sep 27 '13 at 00:01

Need to iterate through stored json objects in local storage array of json data

1 Answers1