how to loop through an array with nested objects using jquery?

Question

if I have an array like this:

var msg = [ {name: ["a1", "a2"], value: "this is A"},
            {name: ["b1", "b2"], value: "this is B"},
            ...
          ]

The array contains global errors messages for client-side form validations. I have managed to pass in faulty inputs (eg "a1") and now am wondering how to get the corresponding message out of my ill-constructed array.

Question
What would be the best way to loop through this array? for example, if I have "a1" as parameter passed into my function, how do I extract "this is A" as corresponding message?

inArray doesn't really help, because I need the corresponding message and not the position of a1 . I'm also not sure if this is the best way to store my error messages... ideas welcome!

Thanks for help!

Answer 1

Re-arrange your data structure:

var my_param = 'b1';

// This is an object, so we can have key/value pairs
var error_codes =
{
    'a1': 0,
    'a2': 0,
    'b1': 1,
    'b2': 1
};

// This is an array because we only need values
var error_messages =
[
    'This is A',
    'This is b'
];

alert(error_messages[error_codes[my_param]]);

This makes it really easy to set up new error codes and messages, and is extremely easy to understand. The only gotcha is error_codes[my_param] - it's an object, but we can't do error_codes.my_param because it'll look for the element called 'my_param', so using array notation, we can look up the object key.

The only other potential trap is making sure you don't have any trailing commas:

var error_codes = { 'a1': 1, }; // NO!

Also knows as the trailing comma of death !

Answer 2

This would be how I'd do it

var myMsg = findMsg('a1')


function findMsg(msgType){
  msg.forEach(function(obj){
    if(inArray(msgType, obj.name) !== -1){
      return obj.value
    }
  })
}

function inArray(key, obj){
 return obj.join().indexOf(key)
}

Answer 3

$.each is the jQuery way for taking action on each element of an array or each enumerable property of an object.

var value;
$.each(msg, function (i, el) {
  if (el.name.indexOf(name) >= 0) {
    value = el.value;
    return false;  // Stops iteration.
  }
});

If name is "a1" then after running the above, value === "this is A" .

Answer 4

Nice and simple:

var getMessage = function (name)
{
    var msg = [ ... ];

    for(var i = 0; i < msg.length; ++ i)
        if (msg [i].name.indexOf (name) != -1)
            return msg [i].value;
}

Returns either the corresponding message or undefined if the name wasn't found.

You may need a shim for indexOf depending on which browsers you want to support:

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf