Comparing inputs to JSON data: A comprehensive guide

Question

Comparing inputs to JSON data: A comprehensive guide

For a school project, I am trying to validate users without the use of a real database. However, I am facing an issue where every mismatch in information entered is resulting in multiple errors. What I am aiming for is to consolidate these errors into just one notification (in case either the username or password does not match the stored JSON data). Below is the JavaScript code I am using:

const form = document.querySelector('form');
form.addEventListener('submit', function(e){
e.preventDefault();
    
    const emailInput = document.querySelector('#email').value;
const pwdInput = document.querySelector('#pwd').value;

const object = {
email: emailInput,
pwd: pwdInput
};

fetch('users.json')
  .then(res => res.json())
.then(data => {
data.forEach(function(user) {

const userInfo = JSON.stringify(user);
const databaseInfo = JSON.stringify(object);

if(userInfo === databaseInfo) {
console.log('success');
} else {
console.log('err');
}

});
})

.catch(error => console.log('error'));

});

Below is the JSON structure of the fake database:

     [
      {"email": "James", "pwd": "1111"},
      {"email": "Peter", "pwd": "2222"},
      {"email": "Josh", "pwd": "3333"}
     ]

javascript arrays json error-suppression

Answer 1

Answer №1

Utilizing pure JavaScript :

// Simulating fetching data from JSON using a fake function
function simulateFetch () 
{
  return Promise.resolve([
    {"email": "Alice", "pwd": "1234"},
    {"email": "Bob", "pwd": "5678"},
    {"email": "Charlie", "pwd": "9012"}
  ]);
}

const form = document.querySelector('form');

form.addEventListener( 'submit', function(e){
  e.preventDefault();
    
  const emailInput = document.querySelector('#email').value;
  const pwdInput = document.querySelector('#pwd').value;

  const inputObject = {
    email: emailInput,
    pwd: pwdInput
  };

  simulateFetch()     
  .then( users => {
   
    // Iterate over each user to find a match
    for ( let user of users )
    {
      // Destructure email and password from the current user
      let { email, pwd } = user;
      
      // Compare email and password with the ones in the input object
      if ( email === inputObject.email && pwd === inputObject.pwd )
      {
        // Match found, perform actions
        console.log( 'Match found!' );
        return;
      }
    }
    
    // No match found, perform other actions
    console.log( 'No match found...' );
    
  })
  .catch(error => console.log( error ) );

});

<form>
  <input type="text" id="email"/>
  <input type="test" id="pwd"/>
  <input type="submit"/> 
</form>

Answer 2

Utilizing pure JavaScript :

// Simulating fetching data from JSON using a fake function
function simulateFetch () 
{
  return Promise.resolve([
    {"email": "Alice", "pwd": "1234"},
    {"email": "Bob", "pwd": "5678"},
    {"email": "Charlie", "pwd": "9012"}
  ]);
}

const form = document.querySelector('form');

form.addEventListener( 'submit', function(e){
  e.preventDefault();
    
  const emailInput = document.querySelector('#email').value;
  const pwdInput = document.querySelector('#pwd').value;

  const inputObject = {
    email: emailInput,
    pwd: pwdInput
  };

  simulateFetch()     
  .then( users => {
   
    // Iterate over each user to find a match
    for ( let user of users )
    {
      // Destructure email and password from the current user
      let { email, pwd } = user;
      
      // Compare email and password with the ones in the input object
      if ( email === inputObject.email && pwd === inputObject.pwd )
      {
        // Match found, perform actions
        console.log( 'Match found!' );
        return;
      }
    }
    
    // No match found, perform other actions
    console.log( 'No match found...' );
    
  })
  .catch(error => console.log( error ) );

});

<form>
  <input type="text" id="email"/>
  <input type="test" id="pwd"/>
  <input type="submit"/> 
</form>

Answer 3

Answer №2

Trying to illustrate in the comments was a bit complex, so I figured demonstrating would be more effective. Instead of comparing a large JSON string, I believe it's best to compare the smallest amount of data possible - like email to email and password to password.

Therefore, I modified your if statement to make the comparison simpler.

To consolidate all the errors into one, you can implement a flag and set it to true if a match is detected. Then after the forEach loop, you can check that flag and log just one error (in case there is no match).

var users = [{
  email: "user1",
  pwd: "pass1"
}, {
  email: "user2",
  pwd: "pass2"
}];

var object = {
  email: "user3",
  pwd: "pass3"
};

var isMatch = false;
users.forEach(function(user) {
  if (user.email === object.email && user.pwd === object.pwd) {
    console.log("success");
    isMatch = true;
  }
});

if (!isMatch) {
  // only logs once even though there are multiple users
  console.log("No Match!");
}

Answer 4

Trying to illustrate in the comments was a bit complex, so I figured demonstrating would be more effective. Instead of comparing a large JSON string, I believe it's best to compare the smallest amount of data possible - like email to email and password to password.

Therefore, I modified your if statement to make the comparison simpler.

To consolidate all the errors into one, you can implement a flag and set it to true if a match is detected. Then after the forEach loop, you can check that flag and log just one error (in case there is no match).

var users = [{
  email: "user1",
  pwd: "pass1"
}, {
  email: "user2",
  pwd: "pass2"
}];

var object = {
  email: "user3",
  pwd: "pass3"
};

var isMatch = false;
users.forEach(function(user) {
  if (user.email === object.email && user.pwd === object.pwd) {
    console.log("success");
    isMatch = true;
  }
});

if (!isMatch) {
  // only logs once even though there are multiple users
  console.log("No Match!");
}

Answer 5

Answer №3

The primary objective of the function is to validate a tuple (username, password) by checking if it exists within the database, which is an array of objects in this scenario. The goal is to filter out entries from the array that have matching username and password inputs provided by the user. Since there should not be any duplicate tuples of username/password pairs, the filtering process should either return the matching tuple or null.

One potential approach to achieve this is as follows:

function verifyLogin(loginObject) {
  return new Promise((resolve, reject) => {
    fetch('users.json')
      .then(res => res.json())
      .then(data => data.filter(entry => entry.email ===
loginObject.email && loginObject.pwd === object.pwd).length > 0 ? resolve(true) : resolve(false))

      .catch(error => reject(error));

  });
})

}

verifyLogin(loginObject)
  .then(result => result === true ? console.log('Login successful!') : console.log('Login failed'))
  .catch(error => console.log(error))

This implementation clearly demonstrates the intended functionality without causing any unintended side effects.

Answer 6

The primary objective of the function is to validate a tuple (username, password) by checking if it exists within the database, which is an array of objects in this scenario. The goal is to filter out entries from the array that have matching username and password inputs provided by the user. Since there should not be any duplicate tuples of username/password pairs, the filtering process should either return the matching tuple or null.

One potential approach to achieve this is as follows:

function verifyLogin(loginObject) {
  return new Promise((resolve, reject) => {
    fetch('users.json')
      .then(res => res.json())
      .then(data => data.filter(entry => entry.email ===
loginObject.email && loginObject.pwd === object.pwd).length > 0 ? resolve(true) : resolve(false))

      .catch(error => reject(error));

  });
})

}

verifyLogin(loginObject)
  .then(result => result === true ? console.log('Login successful!') : console.log('Login failed'))
  .catch(error => console.log(error))

This implementation clearly demonstrates the intended functionality without causing any unintended side effects.

Comparing inputs to JSON data: A comprehensive guide

Answer №1

Answer №2

Answer №3

Similar questions

Using HTML to format Microsoft Teams cards

How can I pass a JSON object from CefSharp's ChromiumWebBrowser to JavaScript without converting it to a string?

Tips for populating two select tags with jQuery AJAX using a JSON document

Having trouble with Typescript compiler "cannot find module" error when trying to use Webpack require for CSS or image assets?

PHP-powered Countdown Timer for triggering a button's action

Having trouble implementing a method to shift elements in an array using Array.Copy. I need to come up with a better solution

What are the steps to execute a file on localhost using an HTML page?

Leverage the power of jq to access values within nested

Accessing arrays with multiple dimensions in C

Purpose of triggering another function during an ajax request

What causes phaser to flicker on mobile devices?

Unresolved commitment within MongoDB

Guide to migrating disk.db in sails.js to a MongoDB database

Tips for organizing a JSON object's keys into separate arrays while eliminating any duplicates

What are some strategies for retrieving a greater quantity of data from the Stack Exchange API?

Ajax versus embedding data directly into the HTML code

Enhancing efficiency in fast browser communication using Selenium/Puppeteer

Explore the array by locating elements based on the initial two letters of each word in the array

Ways to enable asset sharing among various Angular.js applications on separate servers

What is the best way to record and share a video with jquery and laravel?