Javascript und JSON?!? Anfängerin bitte um Hilfe!

Hallo Leute,

folgende Überlegung stellt sich als Problem für mich dar:
Ich habe drei gleich aufgebaute Objekte, nur mit unterschiedlichen Inhalten und wollte jetzt so ein Objekt definieren und später aufrufen und mit Inhalten füllen.
Die Objekte haben alle: Bild, Überschrift, Unterüberschrift, Text und Detail-Informationen. Ach so, was sich vielleicht noch als schwierig erweist... Die "Objekte" sind Canvas-Elemente.
Das ist ja sicherlich prinzipielle mit JSON möglich, richtig? Und es wird ja dann sicherlich mit Arrays gearbeitet? Muss man dann auch mit einer Schleife arbeiten?
Ich bin noch sehr neu in der Javascript-Programmierung. Hat da jemand eine gute Seite, die er mir empfiehlt? Oder selbst einen einfachen Code?

Ich bitte um schnellstmögliche Antwort
Danke!
Gruß Franzi

Also heute bin ich schon etwas weiter mit meinen Überlegungen und so sieht meine bisherige "Lösung" aus:
var kachel = {
"image": [ 'images/xy.png' , 'images/yz.png' , 'images/za.png' ],
"title1": [ 'ABC' , 'DEF' , 'GHI' ],
"title2": [ 'Studio' , 'KA' , '12' ],
"texts": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
"details": "CMS" };

Nun will ich also innerhalb des Canvas 1 jeweils die Informationen aus 0 vom Array und halt die anderen, die nicht in Arrays geschrieben sind. Ich dachte, das würde so funktionieren:
var ueberschrift = kachel.title1[0];
context.font = "italic 200 2em/2 Sofadi One";
context.fillText(ueberschrift, 15, 215);

Aber so funktioniert das leider nicht. Muss ich da noch irgendwas beachten, wenn ich das so ausgeben möchte???

Ok, zumindest habe ich das mit den Array mithilfe von JSON hinbekommen - dank dieser Seiten http://www.w3schools.com/json/json_syntax.asp und http://www.w3schools.com/json/json_eval.asp

Hier meine Lösung:
var kachel = [
{'image':'images/xyz.png' , 'title1':'xx' , 'title2':'zz' , 'texts':'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.' , 'details':'cms1' },
{'image':'images/qwe.png' , 'title1':'ww' , 'title2':'zr' , 'texts':'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 'details':'cms2' },
{'image':'images/ea.png' , 'title1':'nm' , 'title2':'bv' , 'texts':'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.' , 'details':'cms3' }
];

und die Ausgabe:
context.font = "italic 200 2em/2 Sofadi One";
context.fillText(kachel[0].title1, 15, 215);

So nun im Anschluss soll eine Schleife erstellt werden, da die Canvas-Elemente ja gleich aufgebaut sind... Das ist sicherlich so wie bei der Java-Programmierung aufgebaut, oder? Gibt's da ne gute Seite?

Ich hatte im Studium Java-Programmierung und nun programmiere ich in JavaScript - ist alles ziemlich ähnlich, finde ich.
Das mit der Schleife hab ich nun auch endlich hinbekommen