Build a Record Collection - Build a Record Collection

JavaScript
1

Issue:

I am having issues employing bracket notation as well as dot notation for accessing properties of an object for my Lab. I included various debugging messages in my code to track where my program is stopping and determining why its throwing the following error message:

TypeError: Cannot read properties of undefined (reading 'tracks')

My program is NOWHERE NEAR finished, as I’m simply laying out a foundation. I realize there are likely many syntax/logical errors in it’s current state. However, I am unable to progress any further because I can’t figure out why I am unable to access the tracks property using dot notation OR using bracket notation with the id variable instead of a string literal. An example of this issue is shown in the debugging messages.

MY CODE:

const recordCollection = {
  2548: {
    albumTitle: 'Slippery When Wet',
    artist: 'Bon Jovi',
    tracks: ['Let It Rock', 'You Give Love a Bad Name']
  },
  2468: {
    albumTitle: '1999',
    artist: 'Prince',
    tracks: ['1999', 'Little Red Corvette']
  },
  1245: {
    artist: 'Robert Palmer',
    tracks: []
  },
  5439: {
    albumTitle: 'ABBA Gold'
  }
};


function updateRecords(records, id, prop, value) {
  console.log(records["5439"]["albumTitle"]); // Bracket Notation here works fine
  console.log("Checkpoint 0");

  if (value === null) {
    console.log("Checkpoint 1");

    delete records["id"]["prop"];
  }
  
  console.log("Checkpoint A");
  console.log(records["2468"]["tracks"]); // Able to access the 'tracks' property
  console.log(records["id"]["tracks"]); // Throws TypeError 
  console.log(records.id.tracks); // Throws TypeError (Likely since id starts with a number)

  // PROGRAM STOPPED HERE (Excluding the debugging messages)
  if (prop !== records["id"]["tracks"] && value !== null) {
    console.log("Checkpoint 2");

    records["id"].prop = value;
  }

  console.log("Checkpoint B");

  if (prop === tracks && value !== null && records["id"].hasOwnProperty("tracks") === false) {
    console.log("Checkpoint 3");

    const valArr = [];
    valArr.push(value);
  }
  if (prop === tracks && value !== null) {
    console.log("Checkpoint 4");

    records["id"].tracks.push(value);
  }

  console.log("Checkpoint 5");

  return records;
}

// DEBUGGING
console.log("#### PARENT OBJECT ####\n");
console.log(recordCollection);
console.log("\n#### BRACKET NOTATION TEST ####\n");
console.log(recordCollection["2548"]);
console.log(recordCollection["2548"]["albumTitle"]);
console.log("\n#### FUNCTION CALL ####\n");
console.log(updateRecords(recordCollection, 2468, "artist", ""));

CONSOLE OUTPUT | DEBUGGING

#### PARENT OBJECT ####

{ '1245': { artist: 'Robert Palmer', tracks: [] },
  '2468': 
   { albumTitle: '1999',
     artist: 'Prince',
     tracks: [ '1999', 'Little Red Corvette' ] },
  '2548': 
   { albumTitle: 'Slippery When Wet',
     artist: 'Bon Jovi',
     tracks: [ 'Let It Rock', 'You Give Love a Bad Name' ] },
  '5439': { albumTitle: 'ABBA Gold' } }

#### BRACKET NOTATION TEST ####

{ albumTitle: 'Slippery When Wet',
  artist: 'Bon Jovi',
  tracks: [ 'Let It Rock', 'You Give Love a Bad Name' ] }
Slippery When Wet

#### FUNCTION CALL ####

ABBA Gold
Checkpoint 0
Checkpoint A
[ '1999', 'Little Red Corvette' ]
TypeError: Cannot read properties of undefined (reading 'tracks')

Challenge Information:

Build a Record Collection - Build a Record Collection

2

Should the id parameter be referenced as a string?

Please refer to this reference about when you can use dot notation and when you must use bracket notation.

Property accessors - JavaScript | MDN

1 Like
3

Welcome to the forum @xSaberNight

image

Syntax highlighting shows you are not using the id parameter in your function.

Happy coding

1 Like
4

It shouldn’t be used as a string. I am aware bracket notation should be used if the property name contains any special characters, starts with a number, or has any spaces. This was more-so me trying to debug and see what are the different outputs. I tried to use it in dot notation, but it would throw a TypeError.

Similar instances were written earlier in my code before I realized my mistake, but I left it as is since I am still unsure why the program is throwing the TypeError.

5

you maybe want to review how to use variables to get object properties

1 Like
6

I am trying to understand why it is not being used. I am using chaining to access a property within the records object. However, it keeps throwing TypeError when I try to reference the property name that id contains.

7

if you write records["id"]["tracks"] you are trying to access a property literally named id, which does not exist

1 Like
8

Ah, I understand. I was trying to understand how to utilize variables in bracket notation and was able to refine the program using the following syntax:

console.log(records[id]["tracks"]);

My program now passes all the test cases except this one:

3. After updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me"), tracks should have the string Take a Chance on Me as the last and only element.

I was advised on an earlier forum post not to post my entire code since it’s close to a solution or may very well be the solution which counts as a spoiler. So, I’ll add a snippet of code which shows where the program stops and throws a TypeError.

CODE:

if (prop === "tracks" && value !== "") {

    console.log("Checkpoint 4");

    console.log(records[id]["tracks"]);

    records[id]["tracks"].push(value);

  }

I realize I am pushing an item to a non-existent array for a non-existent property. However, I recall that if you try to access a property for an object it will create it for you. Unless I am wrong on that front. That is my approach here. By trying to access this array/property, the JS interpreter will create it for me. If that is the wrong approach, I am unsure on how I can directly modify the array that a property of an object holds. I learned about how you can reference the values of an array for a property, but not directly modify it.

ERROR:

TypeError: Cannot read properties of undefined (reading 'push')
9

what is this showing?

yeah, but is it creating the tracks property, right?
but then, the tracks property has no value attached to it, right? so there is no array. what happens when you try to do undefined.push(1)?

1 Like
10

console.log(records[id]["tracks"]); is showing the following:

[ '1999', 'Little Red Corvette' ]

It allows me to see that this syntax is functional and doesn’t throw any TypeError. This accesses the track property which stores an array, for that particular nested object (id).

As for what happens when I try to do undefined.push(1);

I get the following:

TypeError: Cannot read properties of undefined (reading 'push')

The issue is that I am trying to figure out how to add a value to a non-existent array to a non-existent nested property. I use the .push()method to append it to the “end” of the array. When I try chaining this method as such:

records[id]["tracks"].push(value);

I get the same TypeError. I recognize it isn’t performing the intended functionality I would like it to for this Lab, but I am unsure how to work around this obstacle.

11

I was able to fix the issues. Thank you everyone that guided me in the right direction.

1 Like