Why does my function only returns the first object from the array

Question

I'm writing note module for a student organizer web app. I wrote a function to fetch an object by its ID but it's not working properly or I have a problem in another part of my code but I can't figure it out.

This function should return the names of categories and subjects. Somehow it returns only the first name from category & subject Array.

My Attempt:

findMyObjectByID = function (objArray, id) {
for (const obj of objArray){
  if (+obj._ID === +id) {
    console.log('--------------------');
    console.log(obj._ID + ' | ' + id );
    console.log(obj._Name);
    console.log('--------------------');
    return obj._Name;
  } else {
    console.log('--------------------');
    console.log(obj._ID + ' | ' + id );
    console.log('ELSE');
    console.log('--------------------');
    return 'undefined';
  }
}
};

I tested the function in a blank project without View. No Problem here. https://pastebin.com/n2JZhMGW

HTML/Angular - form & view
I choose a category and a subject. There are different options for the note categories. 1&2 are with deadline and subject input fields and 3 is just title and text. So this is my HTML/Angular form and view.

<input type="text" name="title" [(ngModel)] = "Title" placeholder="Titel">
<select name="Category" [(ngModel)] = "Category">
  <option *ngFor="let category of Categorys" value="{{category._ID}}">{{category._Name}}</option>
</select>

<div [ngSwitch]="Category">
  <div *ngSwitchCase="1">
    <select name="subject" [(ngModel)] = "Subject">
      <option *ngFor="let subject of Subjects" value="{{subject._ID}}">{{subject._Name}}</option>
    </select>
    <input type="text" name="deadline" [(ngModel)] = "Enddate" placeholder="Deadline eintragen">
  </div>
  <div *ngSwitchCase="2">
    <select name="subject" [(ngModel)] = "Subject">
      <option *ngFor="let subject of Subjects" value="{{subject._ID}}">
{{subject._Name}}</option>
    </select>
    <input type="text" name="deadline" [(ngModel)] = "Enddate" placeholder="Deadline eintragen">
  </div>
</div>
<hr>
<div *ngIf="Category == 1 || Category == 2 || Category == 3">
  <input type="text" name="note" [(ngModel)] = "Note" placeholder="Notiz">
</div>
<hr>
  <button (click) = "add()">Save me</button>
<hr>
<div class="noteBox">
  <h1>Notizen </h1>
  <div class="note"  *ngFor="let note of Notes">
    <h2>{{note._Title}}</h2>
    <span>{{note._DateCreated}} | {{note._CategoryName}}</span>
    <span>Fach: {{note._SubjectName}} | Ablaufdatum: {{note._Enddate}}</span>
    <hr>
    <article>
      {{note._Content}}
    </article>
  </div>
</div>

Typescript - data & object creation
The values of the selectboxes are the ids of the subject and category objects which will later represent the database ids. This is how I create my instance of the note object.

add = function () {
// id, title, content, subjectID, subjectName, userID, userName, categoryID, categoryName, dateCreated, enddate
this.Notes.push(new Note(0, this.Title, this.Note, this.Subject, this.findMyObjectByID(this.Subjects, this.Subject), 0, 'admin', this.Category, this.findMyObjectByID(this.Categorys, this.Category), '2017-05-18', this.Enddate));
this.Note = '';
this.Title = '';
this.Category = 0;
this.Enddate = '';
this.Subject = 0;
};

If it's helpful: this is my data. Since I have no data source yet the data is hard coded.

   constructor() {
    this.addSubjects();
    this.addCategorys();
  }

  addSubjects = function () {
    this.Subjects.push(new Subject(89, 'math'));
    this.Subjects.push(new Subject(16, 'german'));
    this.Subjects.push(new Subject(45, 'english'));
    this.Subjects.push(new Subject(89, 'ped'));
  };

  addCategorys = function () {
    this.Categorys.push(new Category(45, 'homework'));
    this.Categorys.push(new Category(13, 'reminder'));
    this.Categorys.push(new Category(27, 'fastnote'));
  };

Complete app.component.ts file: https://pastebin.com/LrUWYgpX

Mostafa Abdelraouf · Accepted Answer · 2017-05-23 14:30:53Z

1

Your for loop will exit if the first id is not equal to the first element in the objArray because you have a return 'undefined' inside the loop.

I think the correct way to do it is to move the return statement out of the loop

  findMyObjectByID = function (objArray, id) {
    for (const obj of objArray) {
      if (+obj._ID === +id) {
        console.log(obj._Name);
        return obj._Name;
      }
    }
    return 'undefined';
  }

edited May 23, 2017 at 14:30

answered May 23, 2017 at 11:39

Mostafa Abdelraouf

6281 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

unsignedmind Over a year ago

Thank yout for the answer but that didn't work. I modified the function and found out that the propertys of the 'obj' object value doest not change if i add the second note. pastebin.com/cQnd1WfF

Mostafa Abdelraouf Over a year ago

In your pastebin you still have the return 'undefined'; inside the loop, so if the first element is not the correct ID you will always return 'undefined'. You need have it outside the loop. Your loop should look for every element in the array and return 'undefined' only when it has looked through all elements and not found the one you look for. see here pastebin.com/aTgKubNn

unsignedmind Over a year ago

Okay my mistake. Works fine now. Thanks :)

Collectives™ on Stack Overflow

Why does my function only returns the first object from the array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related