I've been trying to make a structure that will contain all the lights of my WebGL app, and I'm having troubles setting up it's values from JS. The structure is as follows:

struct Light {
    vec4 position;
    vec4 ambient;
    vec4 diffuse;
    vec4 specular;
    vec3 spotDirection;
    float spotCutOff;
    float constantAttenuation;
    float linearAttenuation;
    float quadraticAttenuation;
    float spotExponent;
    float spotLightCosCutOff;
};
uniform Light lights[numLights];

After testing LOTS of things I made it work but I'm not happy with the code I wrote:

program.uniform.lights = []; 
    program.uniform.lights.push({
        position: "",
        diffuse: "",
        specular: "",
        ambient: "",
        spotDirection: "",
        spotCutOff: "",
        constantAttenuation: "",
        linearAttenuation: "",
        quadraticAttenuation: "",
        spotExponent: "",
        spotLightCosCutOff: ""         
    });


        program.uniform.lights[0].position = gl.getUniformLocation(program, "lights[0].position");
        program.uniform.lights[0].diffuse = gl.getUniformLocation(program, "lights[0].diffuse");
        program.uniform.lights[0].specular = gl.getUniformLocation(program, "lights[0].specular");
        program.uniform.lights[0].ambient = gl.getUniformLocation(program, "lights[0].ambient");

    ... and so on

I'm sorry for making you look at this code, I know it's horrible but I can't find a better way.

Is there a standard or recommended way of doing this properly? Can anyone enlighten me?