How to use foreach on Record<string, Object[]> in TypeScript and Angular?

Question

I want to know, how can I recreate this C# code in TypeScript

            Dictionary<string, List<string>> sas = new Dictionary<string, List<string>>();
            sas.Add("11", new List<string> { "a", "b", "c" });
            sas.Add("22", new List<string> { "a2", "b2", "c2" });
            foreach(var e in sas)
            {
                Console.WriteLine(e.Key);
                foreach(var s in e.Value)
                {
                    Console.WriteLine(s);
                }
                Console.WriteLine();
            }

I expect that I will get in console this:

11
a
b
c

22
a2
b2
c2

Update

And the most important, how can I use code like this in Angular and why I get undefined un my ngOnInit method?

My Answer class

import { Question } from './question';

export class Answer {
    AnswerId: number;
    Content: string;
    IsCorrect: boolean;
    Mark: number;
    QuestionId: number;
    Question: Question;
}

Component code

testInfo: Record<string, Answer[]>;

    ngOnInit() {
        if (this.id)
            this.dataService.getTestStart(this.id)
                .subscribe((data: Record<string, Answer[]>) =>
                {
                    this.testInfo = data; this.loaded = true;
                    console.log(this.testInfo);

                    for (const key in this.testInfo) {
                        console.log(key);
                        for (const s of this.testInfo[key]) {
                            console.log(s.Content)//here is undefined
                        }
                        console.log()
                    }
                });
    }

When I try to output s.Content i get undefined. And when I try to output this on page using Angular I got nothing.

            <tr *ngFor="let key of testInfo">
                <td class="row-number-column">{{key}}</td>
                <template *ngFor="let s of testInfo[key]">
                    <td>
                        {{s?.content}}
                    </td>
                </template>
            </tr>

What is the actual problem?

Suren Srapyan
– Suren Srapyan

2020-04-21 18:20:00 +00:00
Commented Apr 21, 2020 at 18:20 — Suren Srapyan
– Suren Srapyan, Commented Apr 21, 2020 at 18:20
How to recreate this code from c# into typescript?

Roomey
– Roomey

2020-04-21 18:27:43 +00:00
Commented Apr 21, 2020 at 18:27 — Roomey
– Roomey, Commented Apr 21, 2020 at 18:27

Rubydesic · Accepted Answer · 2020-04-21 18:27:27Z

14

This is probably the most direct 'translation' to typescript.

const sas: Record<string, string[]> = {}
sas["11"] = ["a", "b", "c"]
sas["22"] = ["a2", "b2", "c2"]
for (const key in sas) {
    console.log(key)
    for (const s of sas[key]) {
        console.log(s)
    }
    console.log()
}

answered Apr 21, 2020 at 18:27

Rubydesic

3,51716 silver badges30 bronze badges

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

Comments

Rodrigo Alcorta · Accepted Answer · 2020-04-21 18:30:53Z

1

Typescript:

  const sas: Record<string, string[]> = {};

  sas['11'] = ['a', 'b', 'c'];
  sas['22'] = ['a2', 'b2', 'c2'];

  for (const key in sas) {
    if (sas.hasOwnProperty(key)) {
      console.log(key)
      for (const key2 in sas[key]) {
        if (sas[key].hasOwnProperty(key2)) {
          console.log(sas[key][key2]);
        }
      }
    }
  }

answered Apr 21, 2020 at 18:30

Rodrigo Alcorta

5815 silver badges12 bronze badges

Comments

Arghya C · Accepted Answer · 2020-04-21 18:50:29Z

1

You can use a plain object as well, that's what the JavaScript will get. Or you can type define (apart from Record) as

const sas: { [key: string]: string[] } = {};

And try the JS equivalent as

const sas = {};
sas['11'] = [ 'a', 'b', 'c' ];
sas['22'] = [ 'a2', 'b2', 'c2' ];

for (const key in sas) {
    if (sas.hasOwnProperty(key)) {
    
        console.log(key);
        for (const s of sas[key]) {
            console.log(s);
        }
        console.log('');
    }
}

edited Apr 21, 2020 at 18:50

answered Apr 21, 2020 at 18:49

Arghya C

10.1k4 gold badges51 silver badges70 bronze badges

7 Comments

Roomey Over a year ago

Thx, and how should I use it like this in Angular?

Arghya C Over a year ago

Sorry, I do not have a setup to test Angular code right now. SO your question is about Angular not TypeScript? From your code, you might have to check the casing s?.Content maybe? Also check the data is coming properly in correct format i.e. Record<string, Answer> ?

Roomey Over a year ago

My question is about Angular and TypeScript. My data is coming properly, cause when i output console.log(this.testInfo); I get data in Record<string, Answer> format. When I try to output s?.Content I get undefined too.

Arghya C Over a year ago

Not being able to run your code, debug is the only suggestion I have. You should be able to debug your component code easily.

Arghya C Over a year ago

@Roomey also use the .hasOwnProperty(key)

|

Collectives™ on Stack Overflow

How to use foreach on Record<string, Object[]> in TypeScript and Angular?

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related