Comparing JSON objects with JavaScript models: A guide

Question

Comparing JSON objects with JavaScript models: A guide

Currently I'm working with angular 2 and I have an array of data.

data: MyModel[] = [
{
  id: 1,
  name: 'Name',
  secondName: 'SecondName'
}

In addition, I have created the interface MyModel:

interface MyModel {
id: number,
name: string,
secondName: string

Suppose that I have received data from the Back-End in the form of a JSON object:

{
id: 2,
FIRSTname: 'FName',
secondName: 'SecondName'
}

How do I validate whether the keys in the object match my interface?

For instance, if the field "FIRSTname" is incorrect, then I need to handle it by throwing an exception or other method.

javascript json angular typescript

Answer 1

Answer №1

Perhaps there could be an alternative approach in typescript, in es6 you have the option to:

const data = [
  {
    id: 2,
    name: 'FName',
    secondName: 'SecondName'
  },
  {
    name: 'foo',
    secondName: 'bar'
  },
];
const validate = ({id, name, secondName}) => id && name && secondName

const validData = data.filter(validate)
console.log(validData);

Keep in mind that if any of the values: id, name, secondName, are null, the validate function will return false.

Answer 2

Perhaps there could be an alternative approach in typescript, in es6 you have the option to:

const data = [
  {
    id: 2,
    name: 'FName',
    secondName: 'SecondName'
  },
  {
    name: 'foo',
    secondName: 'bar'
  },
];
const validate = ({id, name, secondName}) => id && name && secondName

const validData = data.filter(validate)
console.log(validData);

Keep in mind that if any of the values: id, name, secondName, are null, the validate function will return false.

Answer 3

Answer №2

Imagine a scenario where you define a variable called obj that implements the model interface. You then proceed to initialize all its properties and compare those keys with another set of data from the backend, which we'll refer to as respDataObj.

Array.prototype.compare = function(testArr) {
    if (this.length != testArr.length) return false;
    for (var i = 0; i < testArr.length; i++) {
        if (this[i].compare) { //To check values in nested arrays
            if (!this[i].compare(testArr[i])) return false;
        }
        else if (this[i] !== testArr[i]) return false;
    }
    return true;
}
Object.keys(respDataObj).compare(Object.keys(obj))

This comparison function is credited to:

Answer 4

Imagine a scenario where you define a variable called obj that implements the model interface. You then proceed to initialize all its properties and compare those keys with another set of data from the backend, which we'll refer to as respDataObj.

Array.prototype.compare = function(testArr) {
    if (this.length != testArr.length) return false;
    for (var i = 0; i < testArr.length; i++) {
        if (this[i].compare) { //To check values in nested arrays
            if (!this[i].compare(testArr[i])) return false;
        }
        else if (this[i] !== testArr[i]) return false;
    }
    return true;
}
Object.keys(respDataObj).compare(Object.keys(obj))

This comparison function is credited to:

Comparing JSON objects with JavaScript models: A guide

Answer №1

Answer №2

Similar questions

Finding the right property by comparing it with an array of objects in a MongoDB aggregation query

What steps can be taken to stop 'type-hacking'?

Javascript: struggling with focus loss

ReactJS: The input is not triggering the onChange event

Stop users from being able to copy text on their smartphones' internet browsers

What is the title of the commonly used state management approach in rxjs? Are there any constraints associated with it?

script to pause video using jQuery

Upon refreshing the page, nested React routes may fail to display

Problem with Ext.net TabPanel

Trouble arising from PHP's encoded array

Iterate through the call feature repeatedly, ensuring that each call has a different iteration number assigned to a variable within the

Utilizing Node.js to retrieve streams in conjunction with OpenAI

Create a new chart using completely unique information

Utilize shell scripting on Linux to parse JSON data

React modal not triggered on click event

Using Kotlin on the Android platform, learn how to convert a string into a JSON string

The `ngx-infinite-scroll` feature does not function properly on mobile devices when used in conjunction with the

React-Collapsible Compilation Error

The response from AngularJS $resource can be considered as both an array and an object

Creating a Music Bingo game to ring in the New Year