We Keep Coding

useState delete array element in the state containing object

my state orderDetail contain orderDetail json
I am getting the _id of the order which I want to delete in function eg _id: 60f1ab20891ced4818b5ea87,
now I want to remove this order from the orders array which is in orderdetail and update the state.
orderdetail = {
_id: 60f1ab20891ced4818b5ea86,
totalPrice: '400',
orders: [
{
_id: 60f1ab20891ced4818b5ea87,
quantity: '1',
price: 200,
name: 'Caramel Latte',
category: 'Steaming Cups'
},
{
_id: 60f1ab20891ced4818b5ea88,
quantity: '1',
price: 200,
name: 'Cinnamon Latte',
category: 'Steaming Cups'
}
],
confirm: 'done',
timestamp: 1626450720332,
name: 'xxx',
email: 'xxx',
}
what I did is clone state then uses for loop to find an index of the order then remove that index element in clone then update state to clone. any other less computation method?

What you need to so is set a new object with the orders array filtered as well as a new totalPrice.
For example
const [orderDetail, setOrderDetail] = useState( /* whatever */ )
const deleteOrder = (id) => {
setOrderDetail(prev => {
// filter out the order by ID
const orders = prev.orders.filter(({ _id }) => _id !== id)
return {
...prev,
orders, // overwrite orders
totalPrice: orders.reduce((total, { quantity, price }) =>
total + quantity * price, 0), // calculate new total
timestamp: Date.now() // perhaps you want to update this too
}
})
}
This uses the functional update version of the useState() hook to easily get access to the previous state value.

Manipulating Data Array in React and Graphql

I'm attempting to manipulate this data in react with graphql. As you can see, I have this data or input in the graphql playground, and this is how I wanted the input to look:
In my frontend, I have a cartItem with an objects inside and array, including the product name, id, and so on. I wanted the input to look like the example I provided above. Is there a way to make that happen?
Codes and Data
This is how my cart's Item Data looks.
CartItem Data:
[
{
id: "6109401fd86d352a70e3694e",
name: "asasasasa",
sku: "sasa",
shippingTime: "1628812800000",
quantity: 1,
},
{
id: "61051c14f25d8830a8e238c0",
name: "Pringles Sour Cream & Onion Potato Crisps 158g",
sku: "sad89f79dsafs",
shippingTime: "1627084800000",
quantity: 1,
},
];
As stated in the preceding example, all I wanted was the product's id and quantity.
Order.js
const [cartItems, setCartItems] = useContext(CartContext);
const [createOrder, { data, loading }] = useMutation(CREATE_ORDER_MUTATION);
const qty = cartItems.map(({ quantity }) => {
return quantity;
});
const cartItemId = cartItems.map(({ id }) => {
return id;
});
function onSubmit() {
createOrder({
variables: {
qty: qty,
products: cartItemId,
paymentMethod: paymentMethod,
address: address,
},
})
}
Whenever I need to console someone. If you log the cartItemId, you'll get something like this:
Same goes with my qty.
Please let me know if you have any other questions or require any additional code, and I will gladly offer it.
Apollo Mutation:
const CREATE_ORDER_MUTATION = gql`
mutation createOrder(
$qty: Int!
$products: String!
$paymentMethod: String!
$address: String!
) {
createOrder(
orderedItems: [{ qty: $qty, products: $products }]
paymentMethod: $paymentMethod
address: $address
) {
id
orderedItems {
qty
products {
id
name
sku
description
}
}
}
}
`;

The code below will transform the cartItems into the desired result. You can loop through the cartItems and create an object with the required structure for each item.
const orderedItems = cartItems.map(({ id, quantity }) => {
return {
qty: quantity,
products: id,
};
});
Complete code will look something like this
const [cartItems, setCartItems] = useContext(CartContext);
const [createOrder, { data, loading }] = useMutation(CREATE_ORDER_MUTATION);
// Restructure the array to desired format
const orderedItems = cartItems.map(({ id, quantity }) => {
return {
qty: quantity,
products: id,
};
});
console.log(orderedItems); // To check if it looks correct
function onSubmit() {
createOrder({
variables: {
orderedItems: orderedItem,
paymentMethod: paymentMethod,
address: address,
},
})
}

How to create array and pass them in Node.js

I'd like to pass fetched data like following array.
{ category: ['Animals','Vehicles']
difficulty: ['easy','medium']
}
I tried something like following, getCategory.push(quiz.getCategory(2)),
But I encountered following errors.
Unexpected token .
I confused how to pass array like data.
If someone has opinon,please let me know.
Thanks
const API_KEY="https://opentdb.com/api.php?amount=10&type=multiple";
const fetch = require('node-fetch');
const Quiz=require("../public/javascripts/quiz");
module.exports={
getQuiz:function(resp){
fetch(API_KEY)
.then(response => response.json())
.then(json => { const quiz = new Quiz(json);
resp.send({
getCategory:quiz.getCategory(1),
getCategory.push(quiz.getCategory(2)),
getDifficulty:quiz.getDifficulty(1),
getDifficulty.push(quiz.getDifficulty(2))
});
});
}
};
My class is following.
class Quiz {
constructor(quizData){
this._quizzes = quizData.results;
this._correctAnswersNum = 0;
}
getNumOfQuiz(){
return this._quizzes.length;
}
getCategory(index){
return this._quizzes[index-1].category;
}
getDifficulty(index){
return this._quizzes[index-1].difficulty;
}
}
module.exports = Quiz;
fetch(API_KEY) returned something like following.
results:
[ { category: 'Animals',
type: 'multiple',
difficulty: 'easy',
question: 'What do you call a baby bat?',
correct_answer: 'Pup',
incorrect_answers: [Array] },
{ category: 'Vehicles',
type: 'multiple',
difficulty: 'medium',
question: 'Which supercar company is from Sweden?',
correct_answer: 'Koenigsegg',
incorrect_answers: [Array] },
{ category: 'Entertainment: Board Games',
type: 'multiple',
difficulty: 'hard',
question: 'Which board game was first released on February 6th, 1935?',
correct_answer: 'Monopoly',
incorrect_answers: [Array] }]

I didn't see how exactly we need to use the Class methods in this implementation..
But we can go as follows.
This is the data we are receiving
const data = [ { category: 'Animals',
type: 'multiple',
difficulty: 'easy',
question: 'What do you call a baby bat?',
correct_answer: 'Pup',
incorrect_answers: [Array] },
{ category: 'Vehicles',
type: 'multiple',
difficulty: 'medium',
question: 'Which supercar company is from Sweden?',
correct_answer: 'Koenigsegg',
incorrect_answers: [Array] },
{ category: 'Entertainment: Board Games',
type: 'multiple',
difficulty: 'hard',
question: 'Which board game was first released on February 6th, 1935?',
correct_answer: 'Monopoly',
incorrect_answers: [Array] }];
The data structure we want to send as in response.
const finalResponse = {
category : [],
difficulty : []
}
Looping over actual data, and collect the data in finalResponse. May be if you already know the index of data you can make the use if Class as mentioned in question. For now we have used data array prototype method forEach to loop over each datum as shown below.
data.forEach(function({category, difficulty}){
finalResponse.category.push(category);
finalResponse.category.push(difficulty);
})
finally send the collected data as response
res.send(finalResponse);

Answer 1 (quick fix):
const API_KEY="https://opentdb.com/api.php?amount=10&type=multiple";
const fetch = require('node-fetch');
const Quiz=require("../public/javascripts/quiz");
module.exports={
getQuiz:function(resp){
fetch(API_KEY)
.then(response => response.json())
.then(json => { const quiz = new Quiz(json);
resp.send({
getCategory:[quiz.getCategory(1), quiz.getCategory(2)],
getDifficulty:[quiz.getDifficulty(1),quiz.getDifficulty(2)]
});
});
}
};
Answer 2 (correct way):
class Quiz : introduce new method to get array | getPropArray() // I'm bad at naming
class Quiz {
constructor(quizData){
this._quizzes = quizData.results;
this._correctAnswersNum = 0;
}
getNumOfQuiz(){
return this._quizzes.length;
}
getCategory(index){
return this._quizzes[index-1].category;
}
getDifficulty(index){
return this._quizzes[index-1].difficulty;
}
/**
* get array of prop (property)
* #param {string} prop
* #param {number} start
* #param {number} end
*/
getPropArray(prop, start=1, end=this._quizzes.length){
let res = [];
for (let i=start-1; i<=end-1; i++){
res.push(this._quizzes[i][prop]);
}
return res;
}
}
module.exports = Quiz;
now you can add new property to your response if you want, idk what logic you wanna use to choose result[index] but here^ you can apply a range.
const API_KEY="https://opentdb.com/api.php?amount=10&type=multiple";
const fetch = require('node-fetch');
const Quiz=require("../public/javascripts/quiz");
module.exports={
getQuiz:function(resp){
fetch(API_KEY)
.then(response => response.json())
.then(json => { const quiz = new Quiz(json);
resp.send({
getCategory: quiz.getPropArray('category' ),
getDifficulty: quiz.getPropArray('difficulty')
});
});
}
};

Proxy in mobx -state-tree

I'm trying to build a simple budgeting app.
Whenever I insert this model into my app. I get a proxy for the expenses. Where is the flaw in my thinking?
I have an action on the Budget.js
when I print it in the useEffect this is what console.log outputs for the expenses a proxy.
I'm expecting it to print the actual data from the initial state.
React.useEffect(() => {
budget.addDummyData()
console.log(budget.expenses)
}, [])
[[Handler]]: Object
[[Target]]: Array(0)
[[IsRevoked]]: false
//////////////////////////////////////////////////////////////////////
//SubCategory
const SubCategory = types
.model('SubCategory', {
id: types.maybeNull(types.string, ''),
name: types.maybeNull(types.string, ''),
amount: types.maybeNull(types.number, 0)
})
const SubCategoryStore = types.model({ subCategory: types.optional(SubCategory, {}) })
export default SubCategoryStore
/////////////////////////////////////////////////////////////////////////
//Category.js
const Category = types
.model('Category', {
id: types.maybeNull(types.string, ''),
name: types.maybeNull(types.string, ''),
subCategories: types.array(SubCategory)
})
const CategoryStore = types.model({ category: types.optional(Category, {}) })
export default CategoryStore
///////////////////////////////////////////////////////////////
// Budget
const Budget = types
.model('Budget', {
totalIncome: 200,
expenses: types.array(Category)
// incomes: types.optional(types.array(Category), [])
}).actions({
addDummyData() {
self.expenses.push(initialStateExpenses)
}
})
const BudgetStore = types.model({ budget: types.optional(Budget, {}) })
export default BudgetStore
const initialStateExpenses = {
id: '123',
name: 'Food',
subCategories: [
{
id: '1314',
name: 'Grocery',
amount: 250
},
{
id: '1442',
name: 'Restaurants',
amount: 50
}
]
}

expenses is of type Category[], you are passing an object. I assume you want to set the expenses from subCategories. If so you can try this
addDummyData() {
initialStateExpenses.subCategories.forEach(ex => self.expenses.push(ex))
}
or
addDummyData() {
self.expenses = initialStateExpenses.subCategories
}
A better approach would be to pass the initialStateExpenses via args to the addDummyData function so your model doesn't depend on external variables
addDummyData(initialStateExpenses) {
initialStateExpenses.subCategories.forEach(ex => self.expenses.push(ex))
}
or
addDummyData(initialStateExpenses) {
self.expenses = initialStateExpenses.subCategories
}
then use it like
budget.addDummyData(initialStateExpenses)

Insert online shopping cart items into MongoDB using Mongoose

I am attempting to insert a cart of items as a JSON object into a MongoDB collection using a mongoose schema.
The customer's ID is getting stored (which comes from the User DB), but the cart items are not. Here is my code:
Sample order data contained in local variable app.js called cartData: { data:[] }:
{
data: [
item {
name: "Product Name 1",
price: '2.99',
sku: '13579',
count: 8
},
item {
name: 'Product Name 2',
price: '21.99',
sku: '24680',
count: 2
}
]
}
Cart.js (Cart Schema):
const mongoose = require("mongoose")
const CartSchema = new mongoose.Schema({
customerID: {
type: String,
required: true
},
cartContents: {
type: [Object]
},
date: {
type: Date,
default: Date.now
}
}, { collection: "ordersDB" })
const Cart = mongoose.model('Cart', CartSchema)
module.exports = Cart
app.js (Order Submit Code):
const Cart = require("../models/Cart")
const customerID = req.user.customerID //Acquired from user database
const newOrder = new Cart({
customerID,
cartData
})
newOrder.save()
.then(customer => {
req.flash("successful", "Your order has been submitted!")
res.redirect("/somepage")
})
.catch(err => console.log(err))
Result:
_id: abcd1234
> cart: Object
> type: Array
> <The Infinite Abyss Of Nothingness aka Empty>
customerID: "1234567890"
date: 2019-12-11T21:14:40.825+00:00
__v: 0
Any insight on this problem would be greatly appreciated.

Based on provided schema Mongoose expects you to pass a field called cartContents. Any other field not compatible with your schema will be ignored. To fix that just name your field explicitly:
const newOrder = new Cart({
customerID,
cartContents: cartData
})