Searching on case insensitive string in an array of objects

Searching on case insensitive string in an array of objects - javascript

let helpData = [
{
"question": "Question = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"answer": "Answer = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"question": "Question = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"answer": "Answer = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"question": "Question = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"answer": "Answer = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"question": "Question = Capital of India",
"answer": "Answer = Delhi."
},
];
let search = "capital";
const res = helpData.filter(obj => Object.values(obj).some(val => val.includes(search)));
console.log(res)
I want to search based on given string. If case matches above code works fine but for insensitive case it doesn't work.
Please help to find a solution

let helpData = [
{
"question": "Question = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"answer": "Answer = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"question": "Question = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"answer": "Answer = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"question": "Question = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"answer": "Answer = Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
];
let regexp = /Lorem Ipsum/gm;
const even = (element) => element.match(regexp);
const resp = helpData.filter(obj => Object.values(obj).some(even));
console.log(resp);
Solution:
For Case Insensitive String
let regexp = /Lorem Ipsum/gmi;
For Case Sensitive String
let regexp = /Lorem Ipsum/gm;
const even = (element) => element.match(regexp);
const resp = helpData.filter(obj => Object.values(obj).some(even));
console.log(resp);

Related

I am trying to convert this EJS JavaScript to React for a portfolio site I am building (beginner)

Here is the original code I wrote for a coffee calculator app
app.js
const express = require('express');
const bodyParser = require('body-parser');
const ejs = require("ejs");
const app = express();
let brewTypeResult = '';
let cupQuantityResult = '';
let gramsOfWater = 0;
let gramsOfCoffee = 0;
let grindType = '';
let stepOne = '';
let stepTwo = '';
let stepThree = '';
let stepFour = '';
let stepFive = '';
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(express.static("public"));
app.get('/', function(req, res) {
res.render("input");
});
app.post("/", function(req, res) {
const brewType = req.body.brewType;
const cupQuantity = req.body.cupQuantity;
console.log("brew type: " + brewType);
console.log("cups: " + cupQuantity);
brewTypeResult = brewType;
cupQuantityResult = cupQuantity;
res.redirect("/results");
switch (brewTypeResult) {
case 'Filter':
grindType = 'Medium'
gramsOfWater = cupQuantity * 235
gramsOfCoffee = cupQuantity * 14
stepOne = 'f1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepTwo = 'f2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepThree = 'f3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepFour = 'f4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepFive = 'f5- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
break;
case 'French Press':
grindType = 'Coarse'
gramsOfWater = cupQuantity * 350
gramsOfCoffee = cupQuantity * 30
stepOne = 'fp1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepTwo = 'fp2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepThree = 'fp3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepFour = 'fp4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepFive = 'fp5- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
break;
case 'V60':
grindType = 'Medium-Coarse'
gramsOfWater = cupQuantity * 250
gramsOfCoffee = cupQuantity * 15
stepOne = 'v1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepTwo = 'v2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepThree = 'v3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepFour = 'v4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepFive = 'v5- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
break;
case 'Aeropress':
grindType = 'Medium-Fine'
gramsOfWater = cupQuantity * 90
gramsOfCoffee = cupQuantity * 15
stepOne = 'a1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepTwo = 'a2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepThree = 'a3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepFour = 'a4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepFive = 'a5- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
break;
case 'Cold Brew':
grindType = 'Extra-Coarse'
gramsOfWater = cupQuantity * 212
gramsOfCoffee = cupQuantity * 15
stepOne = 'cb1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepTwo = 'cb2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepThree = 'cb3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepFour = 'cb4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
stepFive = 'cb5- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.';
break;
default:
grindType = 'error'
}
});
// Make dropdown menu display selected text
// Doesn't work bc node doesn't have DOM
// $(".dropdown-menu li a").click(function(){
// $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
// $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
// });
// Separate Page Results
app.get('/results', function(req, res) {
res.render('results', {
brewType: brewTypeResult,
cupQuantity: cupQuantityResult,
gramsOfWater: gramsOfWater,
gramsOfCoffee: gramsOfCoffee,
grindType: grindType,
stepOne: stepOne,
stepTwo: stepTwo,
stepThree: stepThree,
stepFour: stepFour,
stepFive: stepFive
});
});
app.post("/results", function(req, res) {
res.redirect("/");
});
app.listen(8000, function() {
console.log("Server is running on port 8000.");
});
input.ejs
<div class="container input-grid">
<div class="row">
<div class='col-lg-4 left-column'>
<div class="row">
<h1 class="title-blurb">Coffee Ratio Calculator</h1>
</div>
<div class="row">
<p class="title-blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet. </p>
</div>
</div>
<div class="col-lg-8 right-column">
<div class="box">
<form class="calculator-input" action="/" method="post">
<div class="top-group">
<div class="row input-row">
<h2>Select Your Brew Method</h2>
</div>
<div class="row input-row brew-input">
<select class="brew-input" name="brewType" id="brewType">
<option>Filter</option>
<option>French Press</option>
<option>V60</option>
<option>Aeropress</option>
<option>Cold Brew</option>
</select>
</div>
</div>
<div class="input-row row">
<h2>How many cups?</h2>
</div>
<div class="row cup-input">
<input class="cup-input" type="number" id="quantity" name="cupQuantity" min="1" max="10">
</div>
<div class="button-row calc-button">
<button type="submit" class="btn btn-primary btn-lg buttons">Calculate</button>
</div>
</form>
</div>
</div>
</div>
<br>
</div>
<%-include('partials/footer')%>
results.ejs
<div class="container input-grid">
<div class="row">
<div class="col-lg-4 left-column">
<div class="row">
<h1 class="title-blurb">Coffee Ratio Calculator</h1>
</div>
<div class="row">
<p class="title-blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet. </p>
</div>
</div>
<div class="col-lg-8 right-column">
<form action="/" method="post">
<div class="box">
<div class="results-data">
<div class="row results-row">
<div class="col-md-6">
<h2 class="results-title">Brew Method:</h2>
</div>
<div class="col-md-6">
<h2 class="results-right"><%= brewType %></h2>
</div>
</div>
<div class='row results-row'>
<div class="col-md-6">
<h2 class="results-title">Cup Quantity:</h2>
</div>
<div class="col-md-6">
<h2 class="results-right"><%= cupQuantity %></h2>
</div>
</div>
<div class="row results-row">
<div class="col-md-6">
<h2 class="results-title">Grind Type:</h2>
</div>
<div class="col-md-6">
<h2 class="results-right"> <%= grindType %> </h2>
</div>
</div>
<div class="row results-row">
<div class="col-md-6">
<h2 class="results-title">Grams of Coffee:</h2>
</div>
<div class="col-md-6">
<h2 class="results-right"><%= gramsOfCoffee %> g</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2 class="results-title">Grams of Water:</h2>
</div>
<div class="col-md-6">
<h2 class="results-right"> <%= gramsOfWater %> g</h2>
</div>
</div>
<%# Back Button %>
<div class="button-row">
Back
</div>
</div>
</div>
</form>
</div>
</div>
<div class="brewInstructions">
<h2 class="instructionsTitle"><%= brewType %> Coffee Instructions</h2>
<div class="instructions">
<ol>
<li>
<%= stepOne %>
</li>
<br>
<li>
<%= stepTwo %>
</li>
<br>
<li>
<%= stepThree %>
</li>
<br>
<li>
<%= stepFour %>
</li>
<br>
<li>
<%= stepFive %>
</li>
</ol>
</div>
</div>
<%-include('partials/footer')%>
I am confused on how to convert the app.post to react format and if I can still use the variables <%= %>. I am a beginner and trying to build my portfolio site through react and connect previous projects I have done. Thank you for any help!
I tried to create new react files and copy and paste code in as it seemed to work. I kept coming up with errors and am not sure where to go from here.

UI Only Solution
The data needed for your calculator (e.g. the steps) is hard-coded into your JS code. So you can do the calculation in the React UI without the need of a backend.
This is what the react component could look like:
import {useEffect, useState} from "react";
/** the React component */
export const CoffeeCalculator = () => {
/** the variables which were input to your calculator POST */
const [brewType, setBrewType] = useState('Filter');
const [cupQuantity, setCupQuantity] = useState(1);
/** the variables which will be set during the calucaltion */
const [grindType, setGrindType] = useState(null);
const [gramsOfWater, setGramsOfWater] = useState(null);
const [gramsOfCoffee, setGramsOfCoffee] = useState(null);
const [steps, setSteps] = useState([]);
/** gets executed everytime brewType or cupQuantity changes */
useEffect(() => {
// this is the same logic you had in your Node.js express POST
switch (brewType) {
case 'Filter':
setGrindType('Medium');
setGramsOfWater(cupQuantity * 235);
setGramsOfCoffee(cupQuantity * 14);
setSteps([
'f1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f5- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
])
break;
case 'French Press':
setGrindType('Coarse');
setGramsOfWater(cupQuantity * 350);
setGramsOfCoffee(cupQuantity * 30);
setSteps([
'f1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f5- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
]);
break;
case 'V60':
setGrindType('Medium-Coarse');
setGramsOfWater(cupQuantity * 250);
setGramsOfCoffee(cupQuantity * 15);
setSteps([
'f1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f5- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
]);
break;
case 'Aeropress':
setGrindType('Medium-Fine');
setGramsOfWater(cupQuantity * 90);
setGramsOfCoffee(cupQuantity * 15);
setSteps([
'f1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f5- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
]);
break;
case 'Cold Brew':
setGrindType('Extra-Coarse');
setGramsOfWater(cupQuantity * 212);
setGramsOfCoffee(cupQuantity * 15);
setSteps([
'f1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
'f5- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet.',
]);
break;
default:
setGrindType('error');
}
}, [brewType, cupQuantity]);
return (
<>
<div className="container input-grid">
<div className="row">
<div className='col-lg-4 left-column'>
<div className="row">
<h1 className="title-blurb">Coffee Ratio Calculator</h1>
</div>
<div className="row">
<p className="title-blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit amet. </p>
</div>
</div>
<div className="col-lg-8 right-column">
<div className="box">
<form className="calculator-input" action="/" method="post">
<div className="top-group">
<div className="row input-row">
<h2>Select Your Brew Method</h2>
</div>
<div className="row input-row brew-input">
<select className="brew-input" name="brewType" id="brewType" value={brewType} onChange={event => setBrewType(event.target.value)}>
<option>Filter</option>
<option>French Press</option>
<option>V60</option>
<option>Aeropress</option>
<option>Cold Brew</option>
</select>
</div>
</div>
<div className="input-row row">
<h2>How many cups?</h2>
</div>
<div className="row cup-input">
<input className="cup-input" type="number" id="quantity" name="cupQuantity" min="1" max="10" value={cupQuantity} onChange={event => setCupQuantity(parseInt(event.target.value))} />
</div>
<div className="button-row calc-button">
<button type="submit" className="btn btn-primary btn-lg buttons">Calculate</button>
</div>
</form>
</div>
</div>
</div>
{/*The output - only show if there is a result*/}
<div className={'row'}>
<div className={'col'}>
<div className="box">
<div className="results-data">
<div className="row results-row">
<div className="col-md-6">
<h2 className="results-title">Brew Method:</h2>
</div>
<div className="col-md-6">
<h2 className="results-right">
{brewType}
</h2>
</div>
</div>
<div className='row results-row'>
<div className="col-md-6">
<h2 className="results-title">Cup Quantity:</h2>
</div>
<div className="col-md-6">
<h2 className="results-right">
{cupQuantity}
</h2>
</div>
</div>
<div className="row results-row">
<div className="col-md-6">
<h2 className="results-title">Grind Type:</h2>
</div>
<div className="col-md-6">
<h2 className="results-right">
{grindType}
</h2>
</div>
</div>
<div className="row results-row">
<div className="col-md-6">
<h2 className="results-title">Grams of Coffee:</h2>
</div>
<div className="col-md-6">
<h2 className="results-right">
{gramsOfCoffee} g
</h2>
</div>
</div>
<div className="row">
<div className="col-md-6">
<h2 className="results-title">Grams of Water:</h2>
</div>
<div className="col-md-6">
<h2 className="results-right">
{gramsOfWater} g
</h2>
</div>
</div>
</div>
</div>
</div>
</div>
{/*the steps*/}
<div className={'row'}>
<div className={'col'}>
<div className="brewInstructions">
<h2 className="instructionsTitle">
{brewType} Coffee Instructions
</h2>
<div className="instructions">
<ol>
{/*iterate through the steps to create a <li> element for each step*/}
{
steps.map(instruction => {
return (
<li>
{instruction}
</li>
)
})
}
</ol>
</div>
</div>
</div>
</div>
</div>
</>
)
}
The input and output of the calculator are all in one component. The output is recalculated every time the input changes.
Key differences to the EJS script are:
we are using React state hooks for all input and output variables (useState())
we are using React effect hooks for the actual calculation (useEffect()). This is executed every time brewType or setCupQuantity is changed.
We can deploy the state variables and any other javascript to the html by using curly braces: {grindType}.
UI + Backend Solution
In case you do need a backend integration you can use standard AJAX to retrieve the data from the backend.
For instance, you could save the steps to brew coffee in a backend database.
You can re-use your existing Node.js express app with the following changes:
Enable express to parse json:
app.use(bodyParser.json())
Modify the url of your endpoint to start with /api. This will allow us to host the React app and the express REST API on the same domain:
app.post("/api/calculate", function(req, res) {
const brewType = req.body.brewType;
const cupQuantity = req.body.cupQuantity;
console.log("brew type: " + brewType);
console.log("cups: " + cupQuantity);
let brewTypeResult = brewType;
let cupQuantityResult = cupQuantity;
res.redirect("/results");
switch (brewTypeResult) {
...
}
// return result as json
res.json({
grindType: grindType,
gramsOfWater: gramsOfWater,
gramsOfCoffee: gramsOfCoffee,
steps: stepsArray
});
}
Make sure that your React development server proxies all AJAX requests to /api to your express app. Add this to your React's package.json:
"proxy": "http://localhost:8080"
At last, you can use any AJAX library to fetch the data in your UI useEffect calculator function:
useEffect(() => {
fetch('/api/coffee-calculate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
brewType: brewType,
cupQuantity: cupQuantity,
})
})
.then(async response => {
// parse the response's data to JSON
const json = await response.json();
// assign result to local state
setGrindType(json.grindType);
setGramsOfWater(json.gramsOfWater);
setGramsOfCoffee(json.gramsOfCoffee);
setSteps(json.steps);
})
.catch(error => {
// handle any AJAX errors
})
}, [brewType, cupQuantity])

this is what I ended up doing. i added a ternary statement attached to the onClick function for the button to render different results based on if the calculator had received input yet. big thanks for christoph for pointing me in the right direction!
import React from 'react';
import { useEffect, useState } from 'react';
//styles for grid
import { styled } from '#mui/material/styles';
import Box from '#mui/material/Box';
import Paper from '#mui/material/Paper';
import Grid from '#mui/material/Grid';
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: 'transparent',
boxShadow: '0px 0px 0px',
}));
function CoffeeCalculator() {
const [isCalculated, setIsCalculated] = useState(false);
const [brewType, setBrewType] = useState('Filter');
const [cupQuantity, setCupQuantity] = useState(1);
const [grindType, setGrindType] = useState(null);
const [gramsOfWater, setGramsOfWater] = useState(null);
const [gramsOfCoffee, setGramsOfCoffee] = useState(null);
const [steps, setSteps] = useState([]);
const handleClick = () => {
setIsCalculated(!isCalculated);
};
useEffect(() => {
switch (brewType) {
case 'Filter':
setGrindType('Medium');
setGramsOfWater(cupQuantity * 235);
setGramsOfCoffee(cupQuantity * 14);
setSteps([
'Filter step1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Filter step2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Filter step3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Filter step4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Filter step5- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Filter step6- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
]);
break;
case 'French Press':
setGrindType('Coarse');
setGramsOfWater(cupQuantity * 350);
setGramsOfCoffee(cupQuantity * 30);
setSteps([
'French Press step1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'French Press step2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'French Press step3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'French Press step4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
]);
break;
case 'V60':
setGrindType('Medium-Coarse');
setGramsOfWater(cupQuantity * 250);
setGramsOfCoffee(cupQuantity * 15);
setSteps([
'V60 step1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'V60 step2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'V60 step3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'V60 step4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'V60 step5- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
]);
break;
case 'Aeropress':
setGrindType('Medium-Fine');
setGramsOfWater(cupQuantity * 90);
setGramsOfCoffee(cupQuantity * 15);
setSteps([
'Aeropress step1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Aeropress step2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Aeropress step3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
]);
break;
case 'Cold Brew':
setGrindType('Extra-Coarse');
setGramsOfWater(cupQuantity * 212);
setGramsOfCoffee(cupQuantity * 15);
setSteps([
'Cold Brew step1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Cold Brew step2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Cold Brew step3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Cold Brew step4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
]);
break;
default:
setGrindType('error');
}
}, [brewType, cupQuantity]);
function InputCoffeeCalc() {
return (
<Grid item lg={8} className='right-column'>
<Item>
<div className='box'>
<form
className='calculator-input'
action='/'
method='post'
>
<div className='top-group'>
<h2 className='input-row'>
Select Your Brew Method
</h2>
<select
className='brew-input'
name='brewType'
id='brewType'
value={brewType}
onChange={(event) =>
setBrewType(event.target.value)
}
>
<option>Filter</option>
<option>French Press</option>
<option>V60</option>
<option>Aeropress</option>
<option>Cold Brew</option>
</select>
</div>
<h2 className='input-row'>How many cups?</h2>
<input
className='cup-input'
type='number'
id='quantity'
name='cupQuantity'
min='1'
max='10'
value={cupQuantity}
onChange={(event) =>
setCupQuantity(parseInt(event.target.value))
}
/>
<div className='button-row'>
<button
type='submit'
className='buttons calc-button'
onClick={handleClick}
>
Calculate
</button>
</div>
</form>
</div>
</Item>
</Grid>
);
}
function ResultsCoffeeCalc() {
function ResultsRow(props) {
return (
<Grid container item spacing={0} className='results-row'>
<React.Fragment>
<Grid item md={8} sm={12}>
<Item>
<h2 className='results-left'>{props.data}</h2>
</Item>
</Grid>
<Grid item md={4} sm={12}>
<Item>
<h2 className='results-right'>
{props.results}
</h2>
</Item>
</Grid>
</React.Fragment>
</Grid>
);
}
return (
<div>
<div className='box'>
<Grid
item
// lg={12}
container
spacing={-20}
className='results-data'
>
<ResultsRow data='Brew Method:' results={brewType} />
<ResultsRow
data='Cup Quantity:'
results={cupQuantity}
/>
<ResultsRow data='Grind Type:' results={grindType} />
<ResultsRow
data='Grams of Coffee:'
results={gramsOfCoffee}
/>
<ResultsRow
data='Grams of Water:'
results={gramsOfWater}
/>
</Grid>
<div className='button-row'>
<button
type='submit'
className='buttons calc-button'
onClick={handleClick}
>
Back
</button>
</div>
</div>
<BrewInstructions />
</div>
);
}
function BrewInstructions() {
return (
<div className='brewInstructions'>
<h2 className='instructionsTitle'>
{brewType} Coffee Instructions
</h2>
<div className='instructions'>
<ol>
{/*iterate through the steps to create a <li> element for each step*/}
{steps.map((step) => {
return (
<div>
<li>{step}</li>
<br />
</div>
);
})}
</ol>
</div>
</div>
);
}
return (
<div>
<Box
sx={{ flexGrow: 1 }}
className='coffee-calculator-page input-grid'
>
<Grid container spacing={-20}>
<Grid item lg={4} className='left-column'>
<Item>
<h1 className='title title-blurb'>
Coffee Ratio Calculator
</h1>
<p className='title-blurb'>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Eu
volutpat odio facilisis mauris sit amet.{' '}
</p>
</Item>
</Grid>
{/* returns different results based on calculation input */}
<Grid item lg={8}>
<Item>
{isCalculated ? (
<ResultsCoffeeCalc />
) : (
<InputCoffeeCalc />
)}
</Item>
</Grid>
</Grid>
</Box>
</div>
);
}
export default CoffeeCalculator;

ReactJS: How to maintain Index for Multiple ReadMore/ReadLess Buttons in Loop

I have an array -
var profiles = [
{
name: "Name1",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
name: "Name2",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
name: "Name3",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
name: "Name4",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
];
I want to truncate the description string. Only the first 25 characters should be visible along with the Read More button. When Read More is clicked the state should expand and should show the complete string and when Read Less is clicked the paragraph should collapse.
The issue is when I click on Read More, it triggers click for all the paragraphs in the loop, and all the paragraphs expand/collapse together instead of the one where ReadMore/ReadLess is clicked.
Below is my code
const ProfileGrid = (props) => {
const [textRevealed, toggleText] = useState(false);
const truncLength = 25;
return (
<>
{props.profiles.map((profile,index) => (
<p>{profile.name}</p>
<p>{textRevealed ? profile.profile_description :
profile.description.substring(0, truncLength)}...
<Button onClick={() => toggleText(!textRevealed)}>
{textRevealed ? 'Read Less' : 'Read more'}
</Button>
}</p>
</>
)
}
I am not sure how to exactly maintain the index so when Read More is clicked, only the one that is clicked will expand/collapse.
Thanks

Set the collapse as a independent statement by transform it to a ReactNode, code my be like so.
const truncLength = 25
const ProfileGridItem = ({ name, description = '' }) => {
const [isCollapse, setIsCollapse] = useState(false)
return (
<div>
<p>{name}</p>
<p>
{description.substring(0, isCollapse ? truncLength : undefined)}...
<Button onClick={() => setIsCollapse(isCollapse => !isCollapse)}>
{isCollapse ? 'Read Less' : 'Read more'}
</Button>
</p>
</div>
)
}
const ProfileGrid = props => (
<>
{props.profiles.map((profile, index) => (
<ProfileGridItem key={index} {...profile} />
))}
</>
)

The easiest way is using Component's power.
It means that you should break down each item into the independent component accordingly.
As a result, you can control the sate of each item easily.
const [isShow, setShowHide] = React.useState(false);
const ProfileGrid = (props) => {
return (
<div>
{props.profiles.map((profile, _) => (
<ProfileItem {...profile} />
))}
</div>
);
};
const ProfileItem = (props) => {
const truncLength = 25;
const [isShow, setShowHide] = React.useState(false);
return (
<div>
<p>{props.name}</p>
<p>
{" "}
{isShow
? props.description
: props.description.substring(0, truncLength)}{" "}
...
<button onClick={() => setShowHide((previous) => !previous)}>
{isShow ? "Read Less" : "Read more"}
</button>
</p>
</div>
);
};
var profiles = [
{
name: "Name1",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
name: "Name2",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
name: "Name3",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
name: "Name4",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
];
ReactDOM.render(<ProfileGrid profiles={profiles} />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Keep the position in the navigator after a click event

I have an issue about the scroll in javascript. I made a toggle feature, but when I click on the button, I have an automatic scroll; and I don't want it when the button displays the content. I only want this automatic scroll when the button hides it. I use a tutorial from this website : https://css-tricks.com/using-css-transitions-auto-dimensions/
But I didn't find a solution. I tried somes with the scrollTop or the funcion ScrollTo(), but i doesn't work.
Another thing that I don't understand about this. When I'm on the top of the page and I click on the button, there is no automatic scroll, but I scroll down just a little, the automatic scroll is here. I don't know why.
Last point, tt's necessary that the button is after the div "desc collapsible", because the idea is to close immediately the block after reading it. If it's before, the user cannot do this; he has to scroll up before.
Here is my actual code.
function collapseSection(element) {
// get the height of the element's inner content, regardless of its actual size
var sectionHeight = element.scrollHeight;
var y = element.scrollTop;
// temporarily disable all css transitions
var elementTransition = element.style.transition;
element.style.transition = '';
// on the next frame (as soon as the previous style change has taken effect),
// explicitly set the element's height to its current pixel height, so we
// aren't transitioning out of 'auto'
requestAnimationFrame(function() {
element.style.height = sectionHeight + 'px';
element.style.transition = elementTransition;
// on the next frame (as soon as the previous style change has taken effect),
// have the element transition to height: 0
requestAnimationFrame(function() {
element.style.height = 0 + 'px';
});
});
// mark the section as "currently collapsed"
element.setAttribute('data-collapsed', 'false');
window.scrollBy(0,y)
}
function expandSection(element) {
// get the height of the element's inner content, regardless of its actual size
var sectionHeight = element.scrollHeight;
// have the element transition to the height of its inner content
element.style.height = sectionHeight + 'px';
// when the next css transition finishes (which should be the one we just triggered)
element.addEventListener('transitionend', function(e) {
// remove this event listener so it only gets triggered once
element.removeEventListener('transitionend', arguments.callee);
// remove "height" from the element's inline styles, so it can return to its initial value
element.style.height = 'auto';
});
// mark the section as "currently not collapsed"
element.setAttribute('data-collapsed', 'true');
}
document.querySelector('#toggle-button').addEventListener('click', function(e) {
var section = document.querySelector('.desc.collapsible');
var isCollapsed = section.getAttribute('data-collapsed') !== 'true';
if(isCollapsed) {
expandSection(section)
section.setAttribute('data-collapsed', 'true')
} else {
collapseSection(section)
}
});
.desc {
color: red;
overflow:hidden;
transition:height 0.3s ease-out;
height: 0;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div>
<div class="desc collapsible">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<button id="toggle-button">Toggle collapse</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Thanks by advance!

You need to place your button before that div "desc collapsible" to achieve your functionality
<button id="toggle-button">Toggle collapse</button>
<div class="desc collapsible">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
// remove this line <button id="toggle-button">Toggle collapse</button>

Get a specific instance from an API object with one of the [key, value]

I have an API which send to me an object of 5 instances with each 5 properties. I would like to get an object from one of this property.
Here's one of the instance from the API object :
{lenses: ["35mm 1.4","50mm 1.6"],_id: "5be1ed3f1c9d44000030b061",name: "Zurss 50S",price: 49900,description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua.",imageUrl: "http://localhost:3000/images/vcam_1.jpg"},
I have the value of the _id, I would like to get the entire instance which have this _id.
Tank you for your help !

Like this you can
var p=arr.find(x=>x['_id']==<id>)// Here you have to pass id which you have
var arr=[
{
"lenses":[
"35mm 1.4",
"50mm 1.6"
],
"_id":"5be1ed3f1c9d44000030b061",
"name":"Zurss 50S",
"price":49900,
"description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua.",
"imageUrl":"http://localhost:3000/images/vcam_1.jpg"
}
]
var p=arr.find(x=>x['_id']=='5be1ed3f1c9d44000030b061')
console.log(p)

From what you say, the API is returning something like this
[
{ ... },
{
lenses: ["35mm 1.4","50mm 1.6"],
_id: "5be1ed3f1c9d44000030b061",
name: "Zurss 50S",price: 49900,
description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua.",
imageUrl: "http://localhost:3000/images/vcam_1.jpg"
},
{ ... }
]
That means you have an array of Objects. There are many methods to traverse the array and operate with elements.
To accomplish what you are asking, you can use the Array.find
const apiResult = [{
lenses: ["35mm 1.4","50mm 1.6"],
_id: "5be1ed3f1c9d44000030b061",
name: "Zurss 50S",price: 49900,
description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua.",
imageUrl: "http://localhost:3000/images/vcam_1.jpg"
}
]
const obj = apiResult.find((apiObj) => apiObj._id === "5be1ed3f1c9d44000030b061")
console.log(obj)
You can even create your own function to pass any id you want:
const apiResult = [{
lenses: ["35mm 1.4","50mm 1.6"],
_id: "5be1ed3f1c9d44000030b061",
name: "Zurss 50S",price: 49900,
description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua.",
imageUrl: "http://localhost:3000/images/vcam_1.jpg"
}
]
function getObjWithId(id) {
return apiResult.find((apiObj) => apiObj._id === id)
}
const obj =
console.log(getObjWithId("5be1ed3f1c9d44000030b061"))

Wrap unwrapped textNode using jQuery

I have a HTML structure like this:
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
I need to get the text inside the div wrapped in <p> tag. I'm using the code below:
$('.col-md-6').contents().filter(function() {
return this.nodeType === 3;
}).each(function() {
this.nodeValue = $.trim(this.nodeValue);
}).wrap('<p></p>');
Which works fine IF there is no link (<a>) inside the text. The output with my jQuery code would be:
<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </p>tempor<p> incididunt ut labore et dolore magna aliqua.</p></div>
This is my desired result:
<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
Is this possible?

Using html() and contents()
$('.col-md-6').html(function() {
return $('<p/>').html($(this).contents())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
For multiple .col-md-6 with textNode
$('.col-md-6').each(function() {
$(this).contents().filter(function() {
return this.nodeType === 3;
}).siblings().addBack().wrapAll('<p></p>')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Develop Reference

JavaScript is the programming language of the Web.

Searching on case insensitive string in an array of objects - javascript

Related

I am trying to convert this EJS JavaScript to React for a portfolio site I am building (beginner)

ReactJS: How to maintain Index for Multiple ReadMore/ReadLess Buttons in Loop

Keep the position in the navigator after a click event

Get a specific instance from an API object with one of the [key, value]

Wrap unwrapped textNode using jQuery

Categories

Resources