Recorrer JSON y Cargar en elementos

[opzina]

Tengo un objeto json:

var a = {
'Disciplina1':
{
'categoria_1':
{
'Cursos_1':['Subcurso1','Subcurso2','Subcurso3'],
'Cursos_2':['Subcurso4','Subcurso5','Subcurso6']
},
'categoria_2':
{
'Cursos_3':['Subcurso7','Subcurso8','Subcurso9'],
'Cursos_4':['Subcurso10','Subcurso11','Subcurso12']
}
},
'Disciplina2':{}};

Lo recorro con:

$.each(data, function(disciplines,values) {
console.log(disciplines);
});

En consola obtengo correctamente 'Disciplina1, 'Disciplina2, 'Disciplina n...

En el html tengo 4 elementos <span class="title"></span>

Necesto cargar los títulos con las disciplinas, ejemplo:

disciplina 1 -> title 1
disciplina 2 -> title 2

¿Cuál es la manera óptima de relacionar el json con el array de titles?

[Aijoona]

A que llamás cargar? Inyectar los titulos en el html? Obtener parte del html?

[opzina]

Ejemplo:

$('.title').html(discipline);

o

$('.title').append(discipline);

[opzina]

Ahora me muestra ok:

Código Javascript:

var data = 
    [
         {
                title : 'title 1',
                series : [
                     'series 1',
                     'series 2'
                ]
         },
         {
                title : 'title 2',
                series : [
                     'series2',
                     'series 2'
                ]
         },
         {
                title : 'title 3',
                series : [
                     'series 3',
                     'series 4'
                ]
         },
         {
                title : 'title 3',
                series : [
                     'series 3',
                     'serie44'
                ]
         }
    ];
 

Código Javascript:

var elms = elements.children('.course-title');
    var len = elements.children('.course-title').length;
    for(var i = 0; i < len; i++) {
        
        var title = data[i].title;
        console.log(elms[i]);
        
        $(elms[i]).html('<span>' + title + '</span>');
        
        
    }