Using jQuery Attribute Starts With Selector in Each Loop

Question

I'm retrieving a localstorage string that started life as JSON:

[
    {
        "Key01": "Val01",
        "Key02": "Val02",
        "Key03": "Val03",
        "KeyInfo1": [
            {
                "KIName": "KIVal01",
                "KIId": "KIVal02"
            }
        ],
        "KeyInfo2": [
            {
                "KIName": "KIVal03",
                "KIId": "KIVal04"
            }
        ],
        "KeyInfo3": [
            {
                "KIName": "KIVal05",
                "KIId": "KIVal06"
            }
        ]
    }
]

and converting it back into a JSON array:

var stuff = localStorage.getItem("ls");
var testparse = $.parseJSON(stuff);

I'd like to be able to run a jQuery $.each() loop to isolate only the arrays whose names begin with 'KeyInfo' and tease out their data. I've used jQuery's "Attribute Starts With Selector" feature on HTML elements which have ready selectors like IDs or form names, e.g.: input[name^='news']. Are there such selectors available from JSON? A loop like:

$.each(testparse[0]."[key^='KeyInfo']"[0], function(key, value){
        console.log(key + ' = ' + value);
    });

understandably throws a Uncaught SyntaxError: Unexpected string since I'm trying to access a key before I've set itself up as an attribute in the function associated with the $.each() loop. Can such a scenario work? If not, can someone recommend a way to isolate just those arrays beginning with "KeyInfo"?

Answer 1

You can do a simple check against each key to see if they start with 'KeyInfo'.

$.each(testparse[0], function(key, value){
    if (key.indexOf('KeyInfo') === 0) {
        console.log(key + ' = ' + value);
    }
});

Answer 2

http://jsfiddle.net/7r6Vu/

You'll basically get the original object without keys that don't start with keyInfo.

var testparse = [
    {
        "Key01": "Val01",
        "Key02": "Val02",
        "Key03": "Val03",
        "KeyInfo1": [
            {
                "KIName": "KIVal01",
                "KIId": "KIVal02"
            }
        ],
        "KeyInfo2": [
            {
                "KIName": "KIVal03",
                "KIId": "KIVal04"
            }
        ],
        "KeyInfo3": [
            {
                "KIName": "KIVal05",
                "KIId": "KIVal06"
            }
        ]
    }
]

testparse = $.map(testparse[0], function(value, key) {
    if (key.match(/^KeyInfo/)) {
        var res = {}
        res[key] = value
        return res
    }
})

console.log(testparse)

Answer 3

Use jQuery.map like this ..

var filtered = $.map( test[0], function( n, i) {
    return /^keyInfo/i.test(i) ? n : null;
});

$.each(filtered , function(key, value){
    console.log(value);
});

Answer 4

I gave it a shot. Like so:

var keys = Object.keys(testparse[0]);

var result = keys.filter(function(val){
    return !val.indexOf('KeyInfo'); //Isolate/Filter keys
}).map(function(val, i){
    var res = {}; //Create a new object
    res[val] = testparse[0][val] //Reassign the key/value pairs
    return res;
    //Or maybe do your stuff instead.
})

console.log(result);
/*[ { KeyInfo1: [ { KIName: 'KIVal01', KIId: 'KIVal02' } ] },
{ KeyInfo2: [ { KIName: 'KIVal03', KIId: 'KIVal04' } ] },
{ KeyInfo3: [ { KIName: 'KIVal05', KIId: 'KIVal06' } ] } ]*/

EDIT: Note array.map and array.filter is a part of ECMAScript 5 and wont work in older browsers. You can change these to the jquery equivalent $.map and $.filter. Unfortunatley i didn't have jquery available in my lab atm. ;)