Category Archives: javascript

DNY client (5 – Menu and filtering authenticated content)

February 1, 2020javascript, Node JS, Reactadmin

dny-client-5 source code
src/core/Menu.js

We first look at how we decide whether a link is active or not. We do so by looking at the history’s path name and the current path. If they match, then we’re on that page and we color it orange.

The way how we get history is to import withRouter from ‘react-router-dom’ and then using it as middleware on our Menu component.

import React from 'react'

import { Link, withRouter} from 'react-router-dom'

const isActive = (history, path) => {

if (history.location.pathname === path) return {color: "#ff9900"}

else return {color: "#000000"}

}

The history object is returned to our component as an object. Within this object, we look at property location, and find the pathname of what page we’re on.

// history object

{

"length":7,

"action":"POP",

"location": {

"pathname":"/signin",

"search":"",

"hash":"",

"key":"irdfys"

}

Then we implement signout functionality for when we click on sign out link.
1) We first clear out jwt from the local storage
2) we then make a request to the server for it to signout the current user.

export const signout = (next) => {

console.log('Menu.js - sign out function execute')

if (typeof window !== "undefined") localStorage.removeItem("jwt")

next()

return fetch("http://localhost:8080/signout", {

method: "GET"

}).then(response => {

console.log('signout', response)

return response.json()

}).catch(err => console.log(err))

}

Finally, we implment the filtering of which menu item should be visible depending on whether we’re authenticated or not.

Basically, if our local storage has jwt property, then we’re signed in. We need to get this string, parse it into an JS object, and return it. Else, if this jwt property is empty, then we’re not signed in.

export const isAuthenticated = () => {

if (typeof window == "undefined") { return false }

if (localStorage.getItem("jwt")) {

// gets string from localString's key jwt

// parse this string into a JS object

let obj = JSON.parse(localStorage.getItem("jwt"))

console.log('user obj', obj);

return JSON.parse(localStorage.getItem("jwt"))

} else { return false }

}

We then copy and paste template html into our code. Then use the previous functionality for
1) signing out
2) filtering menu items
3) coloring the active link

// use destructuring to get history property from props

const Menu = ({history}) => (

<div>

{!isAuthenticated() && (

</li>

</li>

</li>

</>)}

{isAuthenticated() && (

</li>

<a className="nav-link"

style={

(isActive(history, "/signout"), {cursor: "pointer" })

}

onClick={() => signout( () => history.push('/') )}

Sign Out

</a>

</li>

<a className="nav-link">{isAuthenticated().user.name}</a>

</li>

</>)}

</ul>

</div>

)

export default withRouter(Menu);

DNY client (4 – Signing in)

January 30, 2020javascript, Node JS, Reactadmin

We first create a sign in page routing in our MainRouter. It routes to component Signin

src/MainRouter.js

import React from 'react'

import {Route, Switch} from 'react-router-dom'

import Home from './core/Home'

import Signup from './user/Signup'

import Signin from './user/Signin'

const MainRouter = () => (

<div>

</Switch>

</div>

)

export default MainRouter;

We then create component Signin. It has email and password for the user to sign in with. The error is required for erroneous situations and the redirect to a specific referer page.

src/user/Signin.js

import React, { Component } from 'react';

import {Redirect} from 'react-router-dom';

export class Signin extends Component {

constructor() {

super()

this.state = {

email: "",

password: "",

error: "",

redirectToReferer: false,

}

handleChange = (name) => (event) => {

this.setState({ error : "" })

this.setState({ [name] : event.target.value })

}

We have an authenticate function that gets the jwt token and stores it into local storage. We store the token value on key ‘jwt’.

But before we do so, we need to make sure the window object exists.
Once the token is set, we set the referer to yes.

authenticate(jwt, next) {

if (typeof window !== 'undefined') {

localStorage.setItem("jwt", JSON.stringify(jwt))

next()

}

Once the user clicks submit, we sign by passing in the email and password. We stringify that data and put it in the body of our POST request to http://localhost:8080/signin.

When successful, we should then get the response with token and some data. We then put this token into the localstorage and set the our redirect to yes so that we redirect to the homepage.

clickSubmit = event => {

event.preventDefault()

const { email, password } = this.state

const user = { email, password }

this.signin(user)

.then(data => {

if (data.error) {

this.setState({ error: data.error })

} else {

// 1) authenticate

this.authenticate(data.token, () => {

// 2) redirect to profile page

this.setState({ redirectToReferer: true})

})

}

})

}

signin = user => {

return fetch('http://localhost:8080/signin', {

method: "POST",

mode: "cors",

headers: {

Accept : "application/json",

"Content-Type": "application/json",

'Access-Control-Allow-Origin':'*'

body: JSON.stringify(user),

})

.then(response => {

return response.json()

})

.catch(err => {

return err

})

}

renderSignInForm = (email, password) => {

return (<form>

<label className="text-muted">Email</label>

<input

onChange={this.handleChange("email")}

type="email"

className="form-control"

value={email}

</div>

<label className="text-muted">Password</label>

<input

onChange={this.handleChange("password")}

type="password "

className="form-control"

value={password}

</div>

<button onClick={this.clickSubmit} className="btn btn-raised btn-primary">submit</button>

</form>);

}

render() {

const { email, password, error, redirectToReferer} = this.state

if (redirectToReferer) {

return <Redirect to="/" />

}

if (email) console.log('email', email)

if (password) console.log('password', password)

if (error) console.log('error', error)

if (redirectToReferer) console.log('redirectToReferer', redirectToReferer)

return (

{error}

</div>

{this.renderSignInForm(email, password)}

</div>

);

}

export default Signin

Before you sign in, clear your localStorage first by opening up Inspect Element, then click on the Application tab. On the left-hand side, you’ll see a clearStorage. Click on it to clear any key/values stores previously.

Now, on the left-hand side, make sure you’re still on the Application tab click on the localhost URL. On your browser navigate to localhost:3000/signin. Then sign in using correct credentials. You’ll see that the key/value will be updated with the token given by the server. This is so that whenever you make future requests, you’ll be using this token with each request. The server will verify it and thus authenticate your requests.

After the successful sign in, you’ll be redirected to the home page.

DNY client (3 – Creating a User)

January 29, 2020javascript, Node JS, Reactadmin

On the client side, make sure we create the event handler for the submit button:

src/user/Signup.js

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

import React, { Component } from 'react';

export class Signup extends Component {

constructor() {

super()

this.state = {

email: "",

password: "",

error: ""

}

// https://stackoverflow.com/questions/33973648/react-this-is-undefined-inside-a-component-function?r=SearchResults

// 1) we use arrow function, so that 'this' is already bound to the component

// 2) if you were to use this.handleChange, you'll have to bind it to the component in

// constructor like this:

// this.handleChange = this.handleChange.bind(this);

// 3) Or do it on the onClick: onClick={this.handleChange.bind(this)}.

// onChange gives event object.

// by definition of curry function, we first give 'name'. Then it return s a function where:

// event => {...}

// onChange gives event obj

// thus, this function will fun.

handleChange = (name) => (event) => {

this.setState({ [name] : event.target.value })

}

// in our Node API

// auth.js - router.post('/signup', userSignupValidator, signup)

clickSubmit = event => {

event.preventDefault()

const { name, email, password } = this.state

const user = { name, email, password }

console.log(JSON.stringify(user))

fetch('http://localhost:8080/signup', {

method: "POST",

mode: "cors",

headers: {

Accept : "application/json",

"Content-Type": "application/json",

'Access-Control-Allow-Origin':'*'

body: JSON.stringify(user),

})

.then(response => {

return response.json()

})

.catch(err => console.log(err ))

}

// when given a curry function

// test = (first) => (second) => {

// console.log('test result: ', first + ', ' + second);

// }

render() {

const { name, email, password } = this.state

if (name) console.log('name', name)

if (email) console.log('email', email)

if (password) console.log('password', password)

// the curry function takes in one parameter

// it returns function:

// second => {

// console.log('test result: ', first + ', ' + second);

// }

//let result = this.test("haha");

// it doesn't run the function without this second parameter, let's give it a parameter:

// result("hehe");

// now, test will run.

return (

<h2 className="mt-5 mb-5">Signup</h2>

<form>

<input

onChange={this.handleChange("name")}

type="text"

className="form-control"

value={this.state.name} />

</div>

<label className="text-muted">Email</label>

<input

onChange={this.handleChange("email")}

type="email"

className="form-control"

value={this.state.email}

</div>

<label className="text-muted">Password</label>

<input

onChange={this.handleChange("password")}

type="password "

className="form-control"

value={this.state.password}

</div>

<button onClick={this.clickSubmit} className="btn btn-raised btn-primary">submit</button>

</form>

</div>

);

}

export default Signup

On the server side, make sure use cors.

To set up: npm i -S cors

app.js:

// @ /routes/index.js

var cors = require('cors');

var app = require('express')();

// Allow all

app.use(cors());

// GET home page

app.get('/', function(req, res, next) {

res.render('index', { title: 'tol-node-public' });

});

module.exports = router;

Now when you fill in the username, password, email, (like I did in the screenshot) you’ll see that the password is ‘compaq’ and does not have a number. Thus, you’ll get a bad request:

Click on the Network tab to see what this bad request is about. You’ll see the request, which is called signup. Click on signup.

In the response from the server, we see that the text tells us that we need a number in our password:

So change our password so that it has a number. This time, when you submit, you’ll see that the response to our request will be successful. When you analyze the response to our request, you’ll see that the json response will have a success message:

Go into your mLab account and you’ll see that our users have the information we just used to create a user:

Now, if you try to submit the same data for registration, the response from the server will tell you that the email you’re using to register already exists:

DNY client (2- Routing)

January 28, 2020javascript, Reactadmin

download dny-client-2
install react router dom package: npm i react-router-dom

In App.js, we extract BrowserRouter from react-router-dom which is the package we just installed.
BrowserRouter needs Router components to let it know where and how to route. Thus we need to implement MainRouter. MainRouter routes ‘/’ to a component called Home. We need to implement this Home component also.

src/App.js

Implement MainRouter

This is the main routing mechanism. We basically extract Route and Switch from the package we just installed. In our case, we need a simple router to route path ‘/’ to component Home

We create this pure component so that it can be used inside component BrowserRouter in App.js
It routes different paths to different components.

src/MainRouter.js

import React from 'react'

import {Route, Switch} from 'react-router-dom'

import Home from './core/Home'

const MainRouter = () => (

<div>

</Switch>

</div>

)

export default MainRouter;

Implement Home component for viewing

We created a router that routes to a Home component. Let us implement that Home component.

First, we create a core folder in src. Then we put Home component in there, which basically just displays the data. This simple display of data is fitting to use a pure component like so:

src/core/Home.js

const Home = () => (

<p className="lead">Welcome to DNY tours</p>

</div>

)

export default Home;

Hence, this core folder will contain all display of views using pure components.

Adding Sign up Page

Create another folder called user, we’ll put all user-related UI in there. Then create file Signup.js:

src/user/Signup.js

import React, { Component } from 'react';

export class Signup extends Component {

constructor() {

super()

this.state = {

email: "",

password: "",

error: ""

}

render() {

return (

<h2 className="mt-5 mb-5">Signup</h2>

<form>

</div>

<label className="text-muted">Email</label>

</div>

<label className="text-muted">Password</label>

</div>

<button className="btn btn-raised btn-primary">submit</button>

</form>

</div>

);

}

export default Signup

update src/MainRouter.js like so:

import React from 'react'

import {Route, Switch} from 'react-router-dom'

import Home from './core/Home'

import Signup from './user/Signup'

const MainRouter = () => (

<div>

</Switch>

</div>

)

export default MainRouter;

DNY Client (1 – setup)

January 20, 2020javascriptadmin

create-react-app dny-client

cd dny-client

npm start

You’ll see the default site.

Open your project with Code and remove these files:

App.test.js
ServiceWorker.js
setupTests.js
logo.svg

Edit these files to like so:

App.js

import React from 'react';

function App() {

return (

<div>

<h1>React Frontend</h1>

</div>

);

}

export default App;

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Go to Bootstrap Material.
We want to put the CSS into our index.html

copy and paste the link int the index.html

Add className container to your App and return the site.
You’ll be able to see some CSS take effect.

App.js

import React from 'react';

function App() {

return (

<h1>React Frontend</h1>

</div>

);

}

export default App;

React Router DOM

npm i react-router-dom

DNY Node API (4 – sign in using JWT )

January 16, 2020javascript, Node JS, Projectsadmin

npm i jsonwebtoken

npm i cookie-parser

dnyNodeAPI-authentication

Creating a User

After creating a user correctly, we get a message saying that a user has been created.

Ensuring user creation correctness

In validator/index.js, we have function userSignupValidator function that ensures we check for the format of the data for when user is created.

We use this function as a middleware in
routes/auth.js

1	router.post('/signup', userSignupValidator, signup)

This means that userSignupValidator is used to validate the incoming JSON’s properties. Only when it passes do we continue on to signup function.

validator/index.js

exports.userSignupValidator = (req, res, next) => {

console.log(`validator/index.js - userSignupValidator`);

req.check("name", "Name is required").notEmpty()

console.log(`name is not null and between 4-10 char √`);

req.check("email", "Email must be between 3 to 32 characters")

.matches(/.+\@.+..+/)

.withMessage("email must contain @")

.isLength({

min: 4,

max: 50

})

console.log(`check for email √`);

req.check("password", "Password is required").notEmpty();

req.check('password')

.isLength({min: 6})

.withMessage("Password must contain at least 6 characters")

.matches(/\d/)

.withMessage("Password must contain a number")

console.log(`check for password √`);

const errors = req.validationErrors()

if (errors) {

const firstError = errors.map(error => error.msg)[0];

return res.status(400).json({error: firstError});

}

console.log(`validator/index.js - no errors, moving on √`)

next();

}

Be sure that you include a number inside your password:

Make sure you include a name when you register for an account:

For your email, ensure to have it in an email format:

Successful Signin

In order to sign in, use /signin, then click on tab Body, choose raw and then JSON format.
Type in a JSON object with key/value “email” and “password”. Then click send. If your credentials are correct, you’ll get an object back with a token key/value.

Copy and paste the value into Headers. In Headers, create a key called “Authorization”.
In the value, type “Bearer ” with a space at the end. Then copy the token behind it.

You are not set up to create/update/delete posts, get/update/delete your own user data.

DNY node api (1 – setup)

January 13, 2020javascript, Node JSadmin

download source
unzip the source code
go into directory and type npm install to install the modules
Once the packages are installed, run it npm run dev
Go to localhost:8080, then check terminal for logs

Set up

Open terminal, navigate to ‘Desktop’

mkdir dnyNodeAPI

cd dnyNodeAPI

npm init

press enter for all selections

npm install express

Then check your node_modules folder and you’ll see whole of packages being installed.

In our package.json file, change ‘main’: ‘index.js’ to ‘main’: ‘app.js’

Create file ‘app.js’:

const express = require('express')

const app = express()

app.get("/", (req, res) => {

console.log(this)

res.send("Hello world from DNY tourism app")

})

const port = 8080

app.listen(port, () => {

console.log(`DNY tourism app listening on port ${port}`)

})

in your terminal, if you went node app.js, it will run the server on port 8080.

But whenever we make a code change, we have to restart the server and this becomes cumbersome. So let’s install nodemon.

npm i nodemon

Then in your package.json:

"scripts": {

"dev": "nodemon app.js"

Now, in your terminal, Ctrl+C to get out of whatever is running.
Then npm run dev.
It will run the command as specified in our package.json and we get the server running with constant updates.

Putting in Routes

routes/posts.js

exports.getPosts = (req, res) => {

res.send("Hello world from DNY tourism app")

}

app.js

const express = require('express')

const app = express()

// bring in routes

const { getPosts } = require('./routes/post')

app.get("/", getPosts)

const port = 8080;

app.listen(port, () => {

console.log(`DNY tourism app listening on port ${port}`)

})

Install Middleware

npm i morgan

Installing Database

Create account in mLab, and create a database. Select default for everything, i.e AWS, server at Europe, and create submit. Then ‘create db user’, and create a username and pwd for the db’s user.

Then, in your project, create a file .env:

.env

1 2	MONGO_URI=mongodb://<username>:<password>@ds263368.mlab.com:63368/dny-tours-api PORT=8080

npm i dotenv

npm i mongoose

app.js

const express = require('express')

const app = express()

const mongoose = require('mongoose')

const morgan = require("morgan");

const dotenv = require('dotenv')

dotenv.config()

// db

mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })

.then(() => console.log('DB Connected'))

mongoose.connection.on('error', err => {

console.log(`DB connection error ${err.message}`)

});

// bring in routes

const postRoutes = require('./routes/post')

app.use(morgan('dev'))

app.use("/", postRoutes)

const port = process.env.PORT || 8080;

app.listen(port, () => {

console.log(`DNY tourism app listening on port ${port}`)

})

post.js

const express = require('express')

const postController = require('../controllers/post')

// have access to router

const router = express.Router()

router.get('/', postController.getPosts)

module.exports = router;

post.js

exports.getPosts = (req, res) => {

//res.send("controllers/post.js - hello wordl from node js");

res.json({

posts: [{title: 'First post'}, {title: 'Second post'}]

})

}

Forkify Web app (part 4 – Building the recipe model)

January 10, 2020javascriptadmin

forkify-Recipes

We create the model part, and then get the controller to use it:

First create the Recipe where we fetch the data from the backend. We dynamically assign properties title, author, image…etc to the data that we get back.

What you’ll notice is that the ingredients we get back are whole words. What we want to do is to parse ingredients words into a short-handed format. But in the end, we also want to put them into an array of objects. That way, we can pass the measurement, unit, and text.

src/js/Model/Recipe.js

100

import axios from 'axios'

export default class Recipe {

constructor(id) {

this.id = id;

}

async getRecipe() {

try {

const res = await axios(`https://forkify-api.herokuapp.com/api/get?rId=${this.id}`);

this.title = res.data.recipe.title;

this.author = res.data.recipe.publisher;

this.image = res.data.recipe.image_url;

this.url = res.data.recipe.source_url;

this.ingredients = res.data.recipe.ingredients;

console.log(res)

} catch (err) {

console.log(error)

}

calcTime() {

// assuming that we need 15 min for each 3 ingredients

const numIng = this.ingredients.length;

const periods = Math.ceil(numIng/3);

this.time = periods * 15;

}

calcServings() {

this.servings = 4;

}

// change ingredient long names to short

parseIngredients() {

console.log('parse ingredients');

const unitsLong = ['tablespoons', 'tablespoon', 'ounce', 'ounces',

'teaspoon', 'teaspoons', 'cups', 'pounds'];

const unitsShort = ['tbsp', 'tbsp', 'oz', 'oz', 'tsp', 'tsp', 'cup', 'pound'];

const newIngredients = this.ingredients.map( el => {

// 1) uniform units

let ingredient = el.toLowerCase();

unitsLong.forEach((unit, i) => {

ingredient = ingredient.replace(unit, unitsShort[i]);

})

// 2) remove parenthesis

ingredient = ingredient.replace(/ *$[^)]*$ */g, ' ')

// 3) parse ingredients into count, unit, and ingredient

const arrIng = ingredient.split(' ');

const unitIndex = arrIng.findIndex(el2 => unitsShort.includes(el2));

let objIng;

if (unitIndex > -1) {

// there is a unit

// Ex. 4 1/2 cups, arrCount is [4, 1/2] ---> "4+1/2" ---> 4.5

// Ex. 4 cups, arrCunt is [4]

const arrCount = arrIng.slice(0, unitIndex);

let count;

if (arrCount.length === 1) {

count = eval(arrIng[0].replace('-', '+'));

} else {

count = eval(arrIng.slice(0, unitIndex).join('+'));

}

objIng = {

count,

unit: arrIng[unitIndex],

ingredient: arrIng.slice(unitIndex+1).join(' ')

};

} else if (parseInt(arrIng[0], 10)) {

// there is NO unit, but 1st element is number

objIng = {

unit: '',

ingredient: arrIng.slice(1).join(' ')

}

} else if (unitIndex === -1) {

// there is no unit and no 1st position

objIng = {

unit: '',

ingredient

};

}

return objIng;

});

this.ingredients = newIngredients

}

We do the same thing for Recipe as we did for Search.
We get data from server. Parse it, and do some processing on it.

We also implement functionality for ‘load’ event.

src/js/index.js

import Search from './models/Search'

import Recipe from './models/Recipes'

import * as searchView from './views/searchView'

import { elements, renderLoader, clearLoader } from './views/base'

const state = {}

/////////////// search controller /////////////////////

const controlSearch = async () => {

const query = searchView.getInput();

if (query) {

state.search = new Search(query);

searchView.clearInput();

searchView.clearResults();

renderLoader(elements.searchRes)

try {

await state.search.getResults()

searchView.renderResults(state.search.result)

} catch(err) {

console.log(err)

}

clearLoader()

}

// other code

////// recipe /////////////

const controlRecipe = async () => {

const id = window.location.hash.replace('#', ''); // entire url, then get the hash

if (id) {

state.recipe = new Recipe(id)

try {

await state.recipe.getRecipe();

state.recipe.parseIngredients();

state.recipe.calcTime()

state.recipe.calcServings();

} catch (err) {

console.log(err)

}

};

['hashchange', 'load'].forEach(event => window.addEventListener(event, controlRecipe))

Make sure we render the results from our fetch operation. We put the result into a list on the left. The result is basically an array of recipes.

src/js/views/searchView.js

export const renderResults = (recipes, page=1, resPerPage=10) => {

const start = (page - 1) * resPerPage;

const end = page * resPerPage;

recipes.slice(start, end).forEach(recipe => renderRecipe(recipe))

renderButtons(page, recipes.length, resPerPage)

}

const renderRecipe = receipe => {

const markup = `<li>

</figure>

<h4 class="results__name">${limitRecipeTitle(receipe.title)}</h4>

<p class="results__author">${receipe.publisher}</p>

</div>

</a>

</li>`;

elements.searchResList.insertAdjacentHTML('beforeend', markup)

}

Forkify Web app (part 3 – loader and pagination)

January 8, 2020javascriptadmin

Loader

Loader is about using the CSS that is provided to you. We copy and paste the html into our js file. Since the style file is present, it will animate the loader.
We then call the renderLoader js function in the controller.

src/js/views/base.js

export const renderLoader = parent => {

const loader = `

<svg>

</svg>

</div>

parent.insertAdjacentHTML('afterbegin', loader);

}

export const clearLoader = () => {

const loader = document.querySelector('.loader')

if (loader) {

loader.parentElement.removeChild(loader);

}

When the data fetched is finished, we then call the removeLoader. We basically find the element with the class name ‘.loader’ and then go up to its parent, and call removeChild on it.

src/js/index.js

Now just use them right before and after the fetching of your data result.

const controlSearch = async () => {

const query = searchView.getInput();

if (query) {

state.search = new Search(query);

searchView.clearInput();

searchView.clearResults();

renderLoader(elements.searchRes)

await state.search.getResults()

clearLoader()

searchView.renderResults(state.search.result)

}

Pagination

Pagination is part of rendering the results that we fetched from the backend.

src/js/index.js

const controlSearch = async () => {

const query = searchView.getInput();

if (query) {

...

searchView.renderResults(state.search.result)

}

We need to modify our renderResults functionality. Before, we just a simple forEach that renders all results. Now we have to be more selective.

We need to know two things, the page we’re on and the number of results per page.

We calculate for start and end so that we can selectively extract those data to be displayed.

If we were to start on say page 1, and 10 results per page we need 0-9.
if we start on page 2, 10 – 19…
…etc.

for ‘start’, we just do: (page-1) * resPerPage
for ‘end’, we simply do: page * resPerPage

Notice we get 0, 10
10 – 20
20 – 30…

We then use slice to get the start/end – 1

so slice(0,10) means to get elements from index 0 to 9
slice (10, 20) means to get elements from index 10 to 19
…etc

which is exactly how we want to render our recipes.

src/js/views/searchView.js

export const renderResults = (recipes, page=1, resPerPage=10) => {

const start = (page - 1) * resPerPage;

const end = page * resPerPage;

recipes.slice(start, end).forEach(recipe => renderRecipe(recipe))

renderButtons(page, recipes.length, resPerPage)

}

for all elements in array A, see if any of it matches in array B.

December 23, 2019javascriptlodashadmin

Given an array of target data…

var sortedWebcasts = [

{ id: 136, providerName: "ATT", 'providerID': 36, 'active': true },

{ id: 138, providerName: "Bell", 'providerID': 40, 'active': false },

{ id: 140, providerName: "Verizon", 'providerID': 1, 'active': true }

];

We want to see if an array of ids can be found in that target data.

Say a user selects these ids:

var selectedIDs = [

{ id : 136},

{ id : 138}

]

We want to see if the selected ids can be found in the target array:

// in array selectedIDs, for every {selectID},

// find if {selectID}.id matches for any element in array sortedWebcasts with id

let idMatch = selectedIDs.map(selectID => _.find(sortedWebcasts, {id: selectID.id}))

console.log(idMatch);

Thus, you see that it looks through the target array on all the selected ids. If the ids match, then it saves it into an array and returns it to you:

output:

(2) [{…}, {…}]
0: {id: 136, providerName: “ATT”, providerID: 36, active: true}
1: {id: 138, providerName: “Bell”, providerID: 40, active: false}
length: 2
__proto__: Array(0)

You can also do it the other way, around, but it is not intuitive. You get every single target item and see if it exists in the toFind array.

It doesn’t fare very well as it forces you to go through every target item. If that target item is not found, undefined is returned and it sticks it into your result array. Thus, that is why we must use _.remove to removes those undefined. This is not the way to go.

1 2	let results = sortedWebcasts.map(webcast => _.find(selectedIDs, {id: webcast.id}) ) console.log(_.remove(results, undefined))