Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Marc Murray
Marc Murray
4,618 Points

Trying to interact with an unfamiliar data structure for a beginner. Array>object>key>object.

I'm working on a simple browser game to learn interacting with JavaScript objects in a little more depth. I was originally laying out the 'buildings' array as one object, but after doing the 'Arrays & Objects' course here I decided to change it to an array of objects, to make the codebase a little more programatic (this is an isolated piece of functionality)

I'm just wondering if anyone could help explain to me how I might interact with the furthest indented parts of the array/objects here?

JSFiddle: https://jsfiddle.net/4mgv1dmh/

// Declare Objects

var inventory = {
    wood: 50,
    steel: 12,
    food: 200
};

var buildings = [{
    name: 'hut',
    built: 1,
    cost: {
        wood: 10
    }
}, {
    name: 'pub',
    built: 0,
    cost: {
        wood: 20,
        steel: 5
    }
}];

// print out buildings and properties here:

var message = '';
var building;

function printCosts() {
    function print(message) {
        var outputDiv = document.getElementById('test-output');
        outputDiv.innerHTML = message;
    }

    for (var i = 0; i < buildings.length; i += 1) {
        building = buildings[i];
        message += '<h3>' + building.name + '</h3>';
        message += '<p> Built: ' + building.built + '</p>';
        message += '<p>Costs:</p>';
        message += '<ul>';
        for (var key in building) {
            if (building.hasOwnProperty(key)) {
                if (key === "cost") {
                    for (var costs in key) {
                        message += key;
                    }
                }
            }
        }
    }
    print(message);
}

printCosts();
Dale Bailey
Dale Bailey
20,269 Points

If you have an array of objects you would access it like:

buildings[i].cost.wood.pine.etc[another index loop].anotherObject;

1 Answer

Steven Parker
Steven Parker
243,227 Points
Steven Parker
Steven Parker
243,227 Points

The "furthest indented part" is an object within the object. You can access it by sub-scripting, or with the dot notation. I've used both below. Also, I made a few other changes:

  • removed the "for (var key in building)" loop since only "cost" was being used
  • removed the ".hasOwnProperty" test since static objects have no inheritance
  • moved the "Costs:" title and starting list tag within the test for cost existing
  • added the list item tags to each item
  • displayed the value along with each cost
  • completed the ul with an ending tag
This_replaces_the_var_key_in_building_loop.js 
        if (building.cost) {   // insure this exists
            message += '<p>Costs:</p>';
            message += '<ul>'; // start list here
            for (var cost in building.cost) {
                // make each one a list item
                message += '<li>' + cost + ": " + building.cost[cost] + '</li>';
            }
            message += '</ul>'; // end the list
        }

Happy coding!   -sp:sparkles:

Marc Murray
Marc Murray
4,618 Points

Oh I see! Thanks, I get it now! My google-fu was somewhat lacking with this issue. Appreciate it!