How to store an array of objects of a particular class in Javascript?

Question

Suppose I have a Javascript class defined this way:

class TmpTestResult {
        constructor(id, title, testresult, tags, subsystem, info){
           this.ID = id;
           this.Title = title;
           this.TestResult = testresult;
           this.Tags = tags;
           this.Subystem = subsystem;
           this.Info = info;
}

How do I go about storing an array of TmpTestResults in Javascript?

(I'm so used to strongly typed c#, that I am at a loss as to how to do this.)

My sample data looks like this:

function GetFakeData() {
        var fakeTestResultArray = {
            "jsonData": "",
            "listResults": [{
                "MyViewName": "Test View",
                "ID": "10233",
                "Title": "Verify the Production data is working.",
                "TestResult": "Pass",
                "Tags": "ATAB, Production, MOCK",
                "Subsystem": "TEST",
                "Info": "OK : OK"
            },
            {
                "MyViewName": "Test View",
                "ID": "54875",
                "Title": "Verify the Production data is working one more time.",
                "TestResult": "Pass",
                "Tags": "ATAB, Production, MOCK",
                "Subsystem": "TEST",
                "Info": "OK : OK"
            },
            {
                "MyViewName": "Test View",
                "ID": "87541",
                "Title": "Verify the Production data is working for a third.",
                "TestResult": "Pass",
                "Tags": "ATAB, Production, MOCK",
                "Subsystem": "TEST",
                "Info": "OK : OK"
                }],
            "MyViewName": "TEST Tests",
            "ErrorInfo": "none",
            "Count" : 0
        }

If you're so used to strong-typing, I would suggest to use TypeScript. Makes the flow from backend to frontend much smoother. — mhodges
– mhodges, Commented Jun 11, 2018 at 16:24
Strongly recommend adopting standard JavaScript naming conventions, which differ from C#'s standard naming conventions (at least when anyone else is going to need to read the code)... — T.J. Crowder
– T.J. Crowder, Commented Jun 11, 2018 at 16:26
@T.J.Crowder Can you provide a link to the naming convention standard you would use? — Su Llewellyn
– Su Llewellyn, Commented Jun 11, 2018 at 16:35
@SuLlewellyn - Naming in JavaScript is really simple. :-) Variables, parameters, properties, non-constructor functions, and methods all start with a lower-case letter and use camelCase. Constructor functions (which is what you're specifying after class) start with an upper-case letter and use CamelCase. Some people write symbolic constants (like the number of milliseconds in a day) in ALL_CAPS_WITH_UNDERSCORES. Others don't. Essentially, like C# except for a lower initial letter (except for constructor function/class names). — T.J. Crowder
– T.J. Crowder, Commented Jun 11, 2018 at 16:38

Muhammad Usman · Accepted Answer · 2018-06-11 16:30:28Z

1

You can use .map and return the TmpTestResult objects like

fakeTestResultArray.listResults.map(o => new TmpTestResult(o.ID, o.Title, o.TestResult, o.Tags, o.Subsystem, o.Info));

Here is snippet

class TmpTestResult {
    constructor(id, title, testresult, tags, subsystem, info) {
        this.ID = id;
        this.Title = title;
        this.TestResult = testresult;
        this.Tags = tags;
        this.Subystem = subsystem;
        this.Info = info;
    }
}
var fakeTestResultArray = {
    "jsonData": "",
    "listResults": [{
            "MyViewName": "Test View",
            "ID": "10233",
            "Title": "Verify the Production data is working.",
            "TestResult": "Pass",
            "Tags": "ATAB, Production, MOCK",
            "Subsystem": "TEST",
            "Info": "OK : OK"
        },
        {
            "MyViewName": "Test View",
            "ID": "54875",
            "Title": "Verify the Production data is working one more time.",
            "TestResult": "Pass",
            "Tags": "ATAB, Production, MOCK",
            "Subsystem": "TEST",
            "Info": "OK : OK"
        },
        {
            "MyViewName": "Test View",
            "ID": "87541",
            "Title": "Verify the Production data is working for a third.",
            "TestResult": "Pass",
            "Tags": "ATAB, Production, MOCK",
            "Subsystem": "TEST",
            "Info": "OK : OK"
        }
    ],
    "MyViewName": "TEST Tests",
    "ErrorInfo": "none",
    "Count": 0
}



var res = fakeTestResultArray.listResults.map(o => new TmpTestResult(o.ID, o.Title, o.TestResult, o.Tags, o.Subsystem, o.Info));

console.log(res)

answered Jun 11, 2018 at 16:30

Muhammad Usman

10.1k26 silver badges41 bronze badges

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

3 Comments

Su Llewellyn Over a year ago

Would the Javascript Set be more appropriate for this kind of problem?

Muhammad Usman Over a year ago

The Set object lets you store unique values of any type. There is no such need of using set in this case

Su Llewellyn Over a year ago

Thank you for setting me straight! I think map is good solution for these reasons: - you don't have to write loops, - you don't have to access the original array or the index position if you don't want to - A new array is produced. Caveats seem to be: - Always return something from your mapping function. (JS provides a default return undefined) - If the input array elements are objects or arrays, and you include them in the output array, then Javascript will still allow the original elements to be accessed.

T.J. Crowder · Accepted Answer · 2018-06-11 16:27:15Z

You just use a standard array and call your constructor:

function GetFakeData() {
    var fakeTestResultArray = {
        "jsonData": "",
        "listResults": [
            new TmpTestResult(
                "10233", 
                "Verify the Production data is working.",
                "Pass",
                "ATAB, Production, MOCK",
                "TEST",
                "OK : OK"
            ),
            new TmpTestResult(/*...*/),
            new TmpTestResult(/*...*/),
            new TmpTestResult(/*...*/),
        ],
        "MyViewName": "TEST Tests",
        "ErrorInfo": "none",
        "Count" : 0
    }

You might consider having the constructor accept an object (perhaps optionally), so you can use literal notation for those:

class TmpTestResult {
    constructor(id, title, testresult, tags, subsystem, info){
       if (typeof id === "object") {
           Object.assign(this, id);
       } else {
           this.ID = id;
           this.Title = title;
           this.TestResult = testresult;
           this.Tags = tags;
           this.Subystem = subsystem;
           this.Info = info;
       }
}

Then

function GetFakeData() {
    var fakeTestResultArray = {
        "jsonData": "",
        "listResults": [
            new TmpTestResult({
                "MyViewName": "Test View",
                "ID": "10233",
                "Title": "Verify the Production data is working.",
                "TestResult": "Pass",
                "Tags": "ATAB, Production, MOCK",
                "Subsystem": "TEST",
                "Info": "OK : OK"
            }),
            new TmpTestResult({
                // ...
            }),
            // ...

JavaScript doesn't have C#'s property-assignment-during-construction thing (whatever it's called) where you can do new TmpTestResult { ID = "..."... But optionally accepting an object is close.

Having to use this functionality in an MVC app, I think this is more along the lines I'd be looking for to mock this behavior.

Arman Fatahi · Accepted Answer · 2018-06-11 16:31:59Z

0

In JavaScript everything is a primitive type such as string or number, or array [ ] or object { }. Store your data in an array of objects which can have nested objects too. Basically, the fakeTestResultArray is already doing a good job.

Now you should look for a database which can keep you JSON objects. Something like MongoDB.

edited Jun 11, 2018 at 16:31

answered Jun 11, 2018 at 16:28

Arman Fatahi

3,0253 gold badges28 silver badges38 bronze badges

3 Comments

mhodges Over a year ago

That is not true. The important distinction is that values have types. Variables, on the other hand, do not (whereas in statically-typed languages, they do). There is a typeof operator for a reason.

mhodges Over a year ago

Also, there is no such thing as a "list []" type. It's called an array, and the type is still an Object

Arman Fatahi Over a year ago

Thanks for the feedback. I edited the parts that were not correct. but the rest still is the same.

Collectives™ on Stack Overflow

How to store an array of objects of a particular class in Javascript?

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related