Storing references to instantiated objects for an address book app

Question

I'm trying to learn how to program and I'm stuck on something that Codecademy et. al. don't elucidate. They always teach you how to hardcode names to instantiated objects so that you can reference them later. I need to know what to do with a dynamic list of contacts.

I'd like to know how to intelligently store references to the objects that I'm creating so that I can know where the instantiated objects are in the future.

For instance, if this app below represents the beginnings of some address book app, how will I connect the user's input in the DOM to the actual object in Javascript? I don't mean for an explanation of how to use event listeners, but rather what data could I use to link a certain contact in the browser to one in my data array.

Currently, I'm just pushing everything into an array, but I'm not really sure what I should be using as an identifier. Of course there is the index of the array, but if I don't know the contacts in the json data list ahead of time, how will I know that [0] is Ethan and not some other name that may have been added to the json list at some point?

Should I be using an array here, or is there some way that I use the name of the object and just have a bunch of objects floating around that I can call later outside of an array?

var TestApp = {};

    // my data... taken from wherever
    TestApp.jsonContacts = {
        contact1: {
            name: "Ethan",
            age: 24
        },
        contact2: {
            name: "Evan",
            age: 30
        },
        contact3: {
            name: "Paul",
            age: 9000
        }
    };

    // I know this is silly, just let me pretend it's strung from a server somewhere...
    TestApp.jsonStrung = JSON.stringify(TestApp.jsonContacts);

    TestApp.globalContactList = [];

    // my constructor function to create instances of Contact
    TestApp.Contact = function(name, age){
        this.name = name;
        this.age = age;
    };

    // where I'm taking data and creating new Contact objects
    TestApp.instantiateObjects = function(){
        // I know this is silly, just let me pretend I'm parsing it necessarily...
        var jsonUnstrung = JSON.parse(TestApp.jsonStrung);
        // I think I'm looping through the first set of objects sitting in jsonContacts
        for (var i in jsonUnstrung) {
            var obj = new TestApp.Contact(jsonUnstrung[i].name, jsonUnstrung[i].age);
            TestApp.globalContactList.push(obj);
        }
    };

    TestApp.instantiateObjects();

Answer 1

If all you're trying to do is convert your JSON into usable models, you can just loop through and convert it, e.g.

TestApp.allContacts = {};

TestApp.instantiateObjects = function(){
    var jsonUnstrung = JSON.parse(TestApp.jsonStrung);

    for (var i in jsonUnstrung) {
        var obj = new TestApp.Contact(jsonUnstrung[i].name, jsonUnstrung[i].age);
        TestApp.allContacts[i] = obj;
    }
};

And you'll have instances for all of them with the same keys. When you work with those objects as a group, however, you shouldn't be accessing them by their key (unless you're modifying one specific one), but should be iterating over the entire set. This can be done if they're stored in JSON or Array form, and there are plenty of examples for each elsewhere. If you're working with a specific one, you should have access to the key/index to preform any replacement/removal you need at that time.