Im learning Javascript and facing trouble with an exercise.
By using array.map() method (and .filter()method). I have to modify this array of object:
var cakes = [
{
name: "cake",
flavor: "vanilla",
status: "available"
},
{
name: "brownie",
flavor: "chocolate",
status: "available"
},
{
name: "pie",
flavor: "strawberry",
status: "available"
},
{
name: "muffin",
flavor: "pistachio",
status: "available"
},
{
name: "donut",
flavor: "chocolate",
status: "available"
},
];
The modification is to set the status of all chocolate cakes in sold out.
For now I've tried several hypothesis. The meaningful one for me, was to put an other iteration with a "for" to ask the method to iterate on the different cakes and modify the status if the flavor was chocolate, but I understand that it's not needed. the method is alreaydy doing it.
I came back to an easier way to do things :
var soldOut1=cakes.map(function(cake){
if(cake.flavor==="chocolate"){
return cake.status="sold out";
}
else{return cake;}
});
console.log(soldOut1);
This gave me the most successful result:
[
{ name: 'cake', flavor: 'vanilla', status: 'available' },
'sold out',
{ name: 'pie', flavor: 'strawberry', status: 'available' },
{ name: 'muffin', flavor: 'pistachio', status: 'available' },
'sold out'
]
But as you may see, and Im sure it's pretty logical, but I can't keep the other properties for brownie and donut cakes. Im trying to understand the .map() method's limit. So is it possible to do that kind of work with a .map() method exclusievely?
Please update you status first then return the element:
var soldOut1=cakes.map(function(cake){
if(cake.flavor==="chocolate"){
cake.status="sold out";
return cake;
}
else{return cake;}
});
console.log(soldOut1);
If you do not want to modify the array but the properties of its items (assuming that the items are objects) then the method that you are looking for is Array.forEach().
const cakes = [{
name: "cake",
flavor: "vanilla",
status: "available"
},
{
name: "brownie",
flavor: "chocolate",
status: "available"
},
{
name: "pie",
flavor: "strawberry",
status: "available"
},
{
name: "muffin",
flavor: "pistachio",
status: "available"
},
{
name: "donut",
flavor: "chocolate",
status: "available"
},
];
cakes.forEach((cake) => {
if (cake.flavor === 'chocolate') {
cake.status = 'sold out';
}
});
console.log(cakes);
If you insist on using Array.map(), it produces a new array that you can then store in the same variable (loosing the original) or in a new variable:
let cakes = [{
name: "cake",
flavor: "vanilla",
status: "available"
},
{
name: "brownie",
flavor: "chocolate",
status: "available"
},
{
name: "pie",
flavor: "strawberry",
status: "available"
},
{
name: "muffin",
flavor: "pistachio",
status: "available"
},
{
name: "donut",
flavor: "chocolate",
status: "available"
},
];
cakes = cakes.map((cake) => {
return {
... cake,
status: cake.flavor === 'chocolate' ? 'sold out': cake.status,
};
});
console.log(cakes);
Please note that, while on the first example cakes is declared as const (the name cakes is associated with an initial value and the association cannot change), on the second example it has to be declared using let, otherwise it cannot be associated with the value returned by Array.map() (which is a new array).
You can destructure the flavor and status for each "pastry" and map the status based on the flavor being "chocolate" or not.
const pastries = [
{ name: "cake" , flavor: "vanilla" , status: "available" },
{ name: "brownie" , flavor: "chocolate" , status: "available" },
{ name: "pie" , flavor: "strawberry" , status: "available" },
{ name: "muffin" , flavor: "pistachio" , status: "available" },
{ name: "donut" , flavor: "chocolate" , status: "available" },
];
const result = pastries.map(({ flavor, status, ...pastry }) => ({
...pastry,
flavor,
status: flavor === 'chocolate' ? 'sold out' : status
}));
console.log(result);
.as-console-wrapper { top: 0; max-height: 100% !important; }
Related
I have an object and i'm pushing into array while pushing i need to restrict the duplicate and also if there is any changes in the property then update the array accordingly ?
[{
Id: "a134",
Name: "Name -",
Company: "001",
Product :"01"
quantity :1
},
{
Id: "a135",
Name: "Name -1",
Company: "002",
Product :"03"
quantity :2 -----> (Previous event.target.name)
},
{
Id: "a135",
Name: "Name -1",
Company: "002",
Product :"03"
quantity :3 ---> (current event.target.name)
}
]
if i'm pushing into array there might be chance to update quantity how to achieve the below result
[{
Id: "a134",
Name: "Name -",
Company: "001",
Product :"01"
quantity :1
},
{
Id: "a135",
Name: "Name -1",
Company: "002",
Product :"03"
quantity :3 ---> (current event.target.name)
}
]
and now my code is
if(event.target.value!='')
{
const searchObj = this.myList.find(({ Id,Product, Company }) => Product === index);
if (searchObj)
{
console.log('searchObj',searchObj);
resultVal = { ...searchObj, quantity:parseInt(event.target.value)};
if (!this.newProductList.some(e => e.Product === resultVal.Product))
{
this.newProductList.push(resultVal);
}
}
}
I think an array is the wrong data type. I would prefer using a map.
This of course only works if the Id is unique since that is what is best used as key:
const myMap = new Map([["a134",{
Name: "Name -",
Company: "001",
Product :"01",
quantity :1
}]]);
And then it is easy to check if an item is already present, before updating the quantity or adding a new item.
const id = "a134"; // or "a135" for a new entry
const newItem = { Name: "Name B",
Company: "002",
Product :"012",
quantity :1
}
if(myMap.has(id)){
const item = myMap.get(id);
myMap.set(id, {...item, quantity: item.quantity +1})
} else {
myMap.set(id,newItem);
}
console.log(myMap) // Map {'a134' => { Name: 'Name A', Company: '001', Product:'01', quantity: 2 } }
This is best solved by using a different data structure: use a plain object, keyed by Id:
let data = {
"a134": {
Id: "a134"
Name: "Name -",
Company: "001",
Product: "01"
quantity: 1
},
"a135": {
Id: "a135",
Name: "Name -1",
Company: "002",
Product: "03"
quantity: 2
},
};
To update/add don't push, but set the object key's value. For example:
// Let's say we want to add/update with this object:
let objToAdd = {
Id: "a135",
Name: "Name -1",
Company: "002",
Product: "03"
quantity: 3
}
// ...then just do:
data[objToAdd.Id] = objToAdd;
This will either update or "insert". In the above case, it will update:
let data = {
"a134": {
Id: "a134"
Name: "Name -",
Company: "001",
Product: "01"
quantity: 1
},
"a135": {
Id: "a135",
Name: "Name -1",
Company: "002",
Product: "03"
quantity: 3
},
};
If you ever need the array-format, then just do:
let arr = Object.values(data);
...but trying to stick with the array is a guarantee for inefficient code. It just isn't the right tool for the job here. You should adapt your code to work with the plain object representation throughout. You can iterate over the values in an object, you can remove items from an object, update, add, ...etc.
I'm trying to concatenate values from "seller" Key in a new variables "sellerList" but I'm not achieving to find a good solution.
const data = {
page: {},
product: {
attributes: {
condition: 'used',
offer: {
offer1: {
condition: 'used',
offerID: '1111',
seller: 'Ben',
sellerID: 'abc',
},
offer2: {
condition: 'used',
offerID: '2222',
seller: 'manu',
sellerID: 'def',
},
offer3: {
condition: 'used',
offerID: '3333',
seller: 'Ben',
sellerID: 'abc',
},
},
},
},
};
I found this post which has a similar issue, but it's not working on my side
As we can't use map method on object, I pushed my object into an array like this:
dataArr = [];
dataArr.push(data);
Then I used the following code to concatenate:
const sellersList = Object.keys(digitalData)
.map((o) => o.seller)
.join(';');
console.log('Offer list :' + sellersList);
But this returns an empty string: "Offer list :;"
So my goal is to have a final string like this : "ben;manu;ben"
Does anyone have an idea how to arrange the code fit with my case ?
Thank you for your help and your time.
Based on the data shape that you shared, you can do it like that:
Object.values(data.product.attributes.offer)
.map(offer => offer.seller)
.join(';')
You can do it like this. It does rely on your data having this specific shape with those precise key names - but it's not clear what else you can do as I don't know the details of where your data comes from and what else it might look like. Hope this helps give you a start, anyway!
const data = {
page: {},
product: {
attributes: {
condition: "used",
offer: {
offer1: {
condition: "used",
offerID: "1111",
seller: "Ben",
sellerID: "abc",
},
offer2: {
condition: "used",
offerID: "2222",
seller: "manu",
sellerID: "def",
},
offer3: {
condition: "used",
offerID: "3333",
seller: "Ben",
sellerID: "abc",
},
},
},
},
};
const result = Object.values(data.product.attributes.offer).map(offer => offer.seller).join(";");
console.log(result);
I want to filter this array of object by one favoriteCities for example by Paris but it's not working, I wouls like to get an array with the object that contain "Paris" in the favoriteCities, please hep I tried several options
const favCity= [{
name: "shaun",
favoriteCities: ["Paris", "London"]
},
{
name: "valerie",
favoriteCities: ["Paris", "NewYork"]
},
{
name: "peter",
favoriteCities: ["London", "Berlin"]
}
]
const res = favCity.filter((ele,i)=>{
return {
name: ele.name,
favoriteCities: ele.favoriteCities.filter(element=>
element === "Paris" ? ele.favoriteCities : [])
}
});
console.log(res)
let favCity= [{
name: "shaun",
favoriteCities: ["Paris", "London"]
},
{
name: "valerie",
favoriteCities: ["Paris", "NewYork"]
},
{
name: "peter",
favoriteCities: ["London", "Berlin"]
}
]
favCity = favCity.filter(element => element.favoriteCities.includes("Paris"))
console.log(favCity)
Hello I want to print innermost content from following query,
How can I access plans > personal > title, and print the content on screen.
Thanks a lot!
I get data from data.js which is shown below:
export default [
{
sys: {
id: "1"
},
fields: {
name: "cloud hosting",
slug: "cloud-hosting",
type: "hosting",
price: 100,
size: 200,
capacity: 1,
featured: true,
description:
"The power of SSD + Simplicity of cPanel",
extras: [
"Plush pillows and breathable bed linens",
"Soft, oversized bath towels",
"Full-sized, pH-balanced toiletries",
"Complimentary refreshments",
"Adequate safety/security",
"Internet",
"Comfortable beds"
],
plans:[
{
fields:{
personal:{
title: "personal"
}
}
}
]
}
}
];
You can make use of flatMap. I'm assuming your data is an array.
var data = [{ sys: { id: "1" }, fields: { name: "cloud hosting", slug: "cloud-hosting", type: "hosting", price: 100, size: 200, capacity: 1, featured: true, description: "The power of SSD + Simplicity of cPanel", extras: [ "Plush pillows and breathable bed linens", "Soft, oversized bath towels", "Full-sized, pH-balanced toiletries", "Complimentary refreshments", "Adequate safety/security", "Internet", "Comfortable beds" ], plans: [{ fields: { personal: { title: "personal" } } }] }}];
result = data.flatMap(({fields})=>fields.plans.map(k=>(k.fields.personal.title)));
console.log(result);
I'd like to know how can i add this
{ post_id: 1, text: "text", creation: "date" }
to the "posts" in a array like this
var posts = [
{
post_id: 5,
text: "text",
creation: "date"
},
{
group: "favPosts",
posts: [
{ post_id: 2, text: "text", creation: "date" },
{ post_id: 7, text: "text", creation: "date" }
]
},
{
post_id: 8,
text: "text",
creation: "date"
}
]
I've already tried searching a hundred times but i can't seem to find a answer that suits my case, I've been trying to insert it with commands like slice and push but i can't seem to get it right, i'm still a beginner in javascript.
PS: I've come a solution but i don't think it's very "efficient";
addToGroup("favPosts");
function addToGroup(group) {
for(id in posts) {
if(posts[id].group == group){
posts[id].posts.push({ post_id: 10, text: "did it", creation: "date" });
console.log(posts[id]);
}
}
}
This should work with a push, I don't see why this wouldn't work.
Here is an example, I just used angular to easily display in HTML, not needed for what you are doing:http://plnkr.co/edit/PBCYxfjMqV3jzggMHJZ7?p=preview
var people = [
{
name: "Joe",
surname: "surname"
},
{
group: "name",
people: [{ name: "name", surname: "surname" }, { name: "name", surname: "surname" }]
},
{
name: "James",
surname: "surname"
}
];
var person = { name: "Jennifer", surname: "surname" };
people.push(person);