Having trouble assigning values to an array using Javascript

Question

OK, yeah, I know this is basic stuff, but it's got me by you know what.

Here's the code:

myApp.controller('keyExpController', function ($scope, KeyExpDataService) {
    var ctrlExp = this;
    ctrlExp.keyExp = [];
    $scope.company = {};
    ctrlExp.achKeys = {
        company: [{
                achieves: [],
                details: {
                    super: "",
                    whyleft: ""

                }
            }]
    };
    $scope.keyachievements = [];
    $scope.compName = null;

    ctrlExp.fetchKeyExp = function () {
        //Resume Data
        KeyExpDataService.getKeyExpData().then(function (result) {

            ctrlExp.keyExp = result.data.resume.proexperience;
            console.log("Result: " + ctrlExp.keyExp);
            $scope.groupBy(ctrlExp.keyExp.length);
        });
    };
    ctrlExp.fetchKeyExp();

    // I group the friends list on the given property.
    $scope.groupBy = function (nbrComps) {

        //Set the global value for number of companies
        nbrCompanies = nbrComps;

        var compValue = "_INVALID_GROUP_VALUE_";

        for (var i = 0; i < nbrComps; i++) {

            $scope.keyachievements = ctrlExp.keyExp[i].keyachievements;

            if (ctrlExp.keyExp[i].companyat !== compValue) {

                $scope.company = [{
                        achievements: [],
                        details: {
                            companyName: ctrlExp.keyExp[i].companyat,
                            super: ctrlExp.keyExp[i].supervisor,
                            whyleft: ctrlExp.keyExp[i].reasonforleaving
                        }
                    }];

                compValue = $scope.company.companyName;
                $scope.compName = compValue;

//It's HERE, with the first line that I continually get the following error:
//TypeError: Cannot read property 'achieves' of undefined
//at Scope.$scope.groupBy (controllers.js:151)

//This is line 151 just below:
                achievements.company[i].achieves[i] = $scope.keyachievements;
                achievements.company[i].details.super = ctrlExp.keyExp[i].supervisor;
                achievements.company[i].details.whyleft = ctrlExp.keyExp[i].reasonforleaving;

                ctrlExp.achKeys.company[i].achieves[i] = $scope.keyachievements;
                ctrlExp.achKeys.company[i].details.super = ctrlExp.keyExp[i].supervisor;
                ctrlExp.achKeys.company[i].details.whyLeft = ctrlExp.keyExp[i].reasonforleaving;
            }
        }
    };
});

Now what I'm doing is fine until I hit this in the controller. My OBJECT looks like this broken out for brevity:

    ctrlExp.achKeys = {
        company: [{
                achieves: [],
                details: {
                    super: "",
                    whyleft: ""

                }
            }]
    };

I cannot figure out, for the life of me, yeah, it's got to be because I'm over 50, why I cannot assign anything to the first part of the object:

THIS: ctrlExp.achKeys.company[0].achieves[0] = $scope.keyAchievements

The $scope.keyAchievements hold all the bullets for a particular company. There could be "n" number of companies on a person's resume. Hence, I'm looping through the companies to get the name of the company and the "key achievements" that reside "under" that company for a person.

That's pretty much it.

I'll post the "service" but this site is a cut for my own site, not posted yet, that I'll be using as a template for future considerations. Once I get this, I'm golden.

Thanks everyone for your contributions to our craft.

Where does your achievements variable come from? It is not declared in this code. Also, $scope.company.companyName doesn't exist and will always be undefined. It is probably $scope.company.details.companyName instead. — floribon
– floribon, Commented Feb 21, 2015 at 0:56
I agree with @floribon. It looks like the problem is "achievements" is never defined at any point prior to the attempts to dereference it. — Bert
– Bert, Commented Feb 21, 2015 at 3:09

Manube · Accepted Answer · 2015-02-21 07:29:06Z

It looks like it's trying to set a value to a variable which is as yet undefined, namely achievements.company[i]

So, if you added something like:

achievements.company[i]={};

before your line 151, it could work. Well, you wouldn't get the

TypeError: Cannot read property 'achieves' of undefined

message anymore.

In JavaScript, you can have undefined variables/objects, but you can't assign properties to them.

From the error message above, it looks like achievements is defined, whereas achievements.company[i] is not, hence the issue when you want to assign the achieves[i] property to it.

Had achievements been undefined, you would have got the message:

Cannot read property 'company' of undefined

David · Accepted Answer · 2015-02-21 04:52:22Z

0

What browser are you using to test this? I ask because I've run into some incompatibilities in the past with similar commands and so I just avoid them now.

Instead I would do a more compatible Array.push() changing:

ctrlExp.achKeys.company[0].achieves[0] = $scope.keyAchievements

to

ctrlExp.achKeys.company[0].achieves.push($scope.keyAchievements);

answered Feb 21, 2015 at 4:52

David

7,1452 gold badges24 silver badges29 bronze badges

Comments

Peter The Angular Dude · Accepted Answer · 2015-02-21 18:37:26Z

So, yeah, I figured it out RIGHT after I posted the question.

Here's how I did it:

myApp.controller('keyExpController', function ($scope, KeyExpDataService) {
    var ctrlExp = this;
    ctrlExp.keyExp = [];
    $scope.company = {};
    ctrlExp.achKeys = {
        company: {
            achieves: [],
            details: []
        }
    };
    $scope.keyachievements = [];
    $scope.compName = null;

    ctrlExp.fetchKeyExp = function () {
        //Resume Data
        KeyExpDataService.getKeyExpData().then(function (result) {

            ctrlExp.keyExp = result.data.resume.proexperience;
            console.log("Result: " + ctrlExp.keyExp);
            $scope.groupBy(ctrlExp.keyExp.length);
        });
    };
    ctrlExp.fetchKeyExp();

    // I group the friends list on the given property.
    $scope.groupBy = function (nbrComps) {

        //Set the global value for number of companies
        nbrCompanies = nbrComps;

        var compValue = "_INVALID_GROUP_VALUE_";

        for (var i = 0; i < nbrComps; i++) {

            $scope.keyachievements = ctrlExp.keyExp[i].keyachievements;

            if (ctrlExp.keyExp[i].companyat !== compValue) {

                $scope.company = {
                    achievements: [$scope.keyachievements],
                    details: [{
                            companyName: ctrlExp.keyExp[i].companyat,
                            super: ctrlExp.keyExp[i].supervisor,
                            whyleft: ctrlExp.keyExp[i].reasonforleaving
                        }]
                };

                compValue = $scope.company.companyName;
                $scope.compName = compValue;

                achievements.company.achieves[i] = $scope.keyachievements;
                details.company.hr[i] = [
                    {
                        super: ctrlExp.keyExp[i].supervisor,
                        whyleft: ctrlExp.keyExp[i].reasonforleaving
                    }
                ];

                ctrlExp.achKeys.company.achieves[i] = $scope.keyachievements;
                ctrlExp.achKeys.company.details[i] = [
                    {
                        super: ctrlExp.keyExp[i].supervisor,
                        whyleft: ctrlExp.keyExp[i].reasonforleaving
                    }
                ];

            }
        }
    };
});

So up above all the controller calls I put these ARRAYS in a global scope:

var achievements = {
    company: {
        achieves: []
    }
};
var details = {
    company: {
        hr: []
    }
};

var edu1 = {
    hsandcol: {
        school: []
    }
};
var edu2 = {
    other: {
        school: []
    }
};

And here's an example service I simply copy and paste and rename as I need

    myApp.factory('EduDataService', function ($http, URL) {

        var getEduExpData = function () {
            return $http.get(URL + 'resume.json')
                    .success(function (data) {
                        console.log("SUCCESS!");
                        //console.log("The Key Experiences array length: " + data.resume.proexperience.length);
                        return data.resume.education;
                    })
                    .error(function (e) {
                        console.log("He\'s dead Jim!", e);
                        return e;
                    });

        };
        return {
            getEduExpData: getEduExpData
        };

    });

In the HTML file, I figured out how to isolate and embed controllers within controllers calling the parent controller to do everything while the child controller get all the data.

It's pretty cool.

Note: ctrlRes is the call from the PARENT CONTROLLER: resumeController way above. I'll post the final site completion in a wee bit. It's pretty awesome and the JSON object holds everything about a person's resume and it's a great template for anyone needing a core resume website with ANGULAR and Bootstrap exclusively. Actually, it's for me and I don't mind sharing but it'll expose my last name.

and the HTML snippet:

    <div class="my-education">
        <h3>My Education</h3>
        <!-- Education Start -->
        <div class="education" ng-controller="eduController">
            <h4>High School and College</h4>
            <div class="panel-group" id="accordionedu{{$index}}">
                <div class="panel panel-default" ng-repeat="edu in ctrlRes.eduHsCol[0]">
                    <div class="panel-heading">
                        <h5 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseEdu{{$index}}">
                                {{edu.name}}&nbsp;{{edu.type}}
                                <span class="pull-right">[{{edu.start}} - {{edu.end}}]</span>
                            </a>
                        </h5>
                    </div>
                    <div id="collapseEdu{{$index}}" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div>
                                <h5>
                                    <span class="pull-left">
                                        <strong>Location:</strong>
                                        &nbsp;{{edu.locale}}
                                    </span>
                                    <span class="pull-right">
                                        <strong>Major:</strong>
                                        &nbsp;{{edu.maj}}
                                    </span>
                                </h5>
                                <br><br>
                                <span class="pull-left">
                                    <strong>Graduated:</strong>
                                    &nbsp;{{edu.grad}}&nbsp;
                                    <strong>GPA:</strong>
                                    &nbsp;{{edu.gpa}}
                                </span>
                                <span class="pull-right">
                                    <strong>Minor:</strong>
                                    &nbsp;{{edu.min}}
                                </span>
                                <br>
                                <hr/>
                                <p>
                                    <strong><em>Comments:&nbsp;</em></strong>
                                </p>
                                <div>
                                    {{edu.comments}}
                                </div>
                                <br>
                                <div ng-show="edu.type === 'College'">
                                    <a href="documents/Academic Transcript.pdf" target="_blank">
                                        Download Academic Transcript - PASSWORD PROTECTED
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre hidden="hidden">{{ctrlRes.eduHsCol|json}}</pre>
            </div>
            <!-- Education 1 End -->
        </div>
        <pre hidden="hidden">{{ctrlRes.eduHsCol|json}}</pre>
        <pre hidden="hidden">{{ctrlRes.eduOther|json}}</pre>
    </div>

By the way, what this essentially does is loop through all your work experience, your education and puts them into Bootstrap Accordions showing the details of the work, name of company, start/end dates, title, specialties, your supervisor, why you left, and a bullet list of achievements smack dab in between. Now you have a dynamic resume website driven by Angular with JSON and even able to download docs with BASE 64/encode/decode to protect your info through MS SQL SERVER, MYSQL or POSTGRES. Thanks everyone for your help. Gotta love this site and Angular is awesome.

Collectives™ on Stack Overflow

Having trouble assigning values to an array using Javascript

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related