I am having an error that my obj.push() and obj.concat() is not a function but I am not so sure why. Here is my code:
onSearch = () => {
var obj = {
product: [
{
field: "is_published",
filter_value: 1
},
{
field: "order_mode",
filter_array: [
"fcfs",
"purchase-order"
]
},
{
relationship: "store",
filter_object: {
field: "slug",
filter_value: "sample"
}
}
]
}
if (this.state.search !== "") {
obj.push(
{
field: "name",
text_search: this.state.search
}
)
}
var obj2 = {
taxonomies: [
[
{ field: "type",
filter_value: "seller"
},
{ field: "slug",
filter_value: "brand"
}
]
]
}
var conc = obj.concat(obj2);
var { getProductSearch } = this.props
getProductSearch(obj.concat(obj2))
}
product and taxonomies are stored in different variables but I need to pass them as one array to getProductSearch and for that, I need to use concat(). then I need to use push() because I want to add an object to the array obj. What am I doing wrong?
The simple answer is because you can't push onto an object. Push is used for arrays.
To make this work you could instead change your code to push onto the array in your object by doing.
obj.product.push(
{
field: "name",
text_search: this.state.search
}
)
If you are trying to make product dynamic where there are multiple products like [fruits, veggies, meat] then you could change it simply by doing
onSearch(productName)
obj[productName].push(
{
field: "name",
text_search: this.state.search
}
)
This would let you call onSearch(veggies) and push only to that array if you set it up that way.
Related
i have problem with my javascript project.
i have an array with value like this :
exmpArr = ["PX1","PX2","PX3"];
and i want to loop and push it to obj like this:
sections = [
{
rows: [
{ title: exmpArr[i], rowId: exmpArr[i] },
],
},
];
the final value must like this:
sections = [
{
rows: [
{ title: "PX1", rowId: "PX1" },
{ title: "PX2", rowId: "PX2" },
{ title: "PX3", rowId: "PX3" },
],
},
];
what should i do?
what i did is i put for loop inside the object and its not work
map returns a new array from the one you're mapping over. So you can immediately assign that array as the property value when you build your object.
const exmpArr = ['PX1', 'PX2', 'PX3'];
const sections = [
{
rows: exmpArr.map(el => {
return { title: el, rowId: el };
})
}
];
console.log(sections);
Some time ago I asked a question about how to filter array based on its key today this function but i am working a new implementation that I'm doing.
create array on basis of object's child
But I'm doing a refactoring of how I treat the field value because before I just need the first object and its value [0].value now I need to expand this logic to work with array I'll leave some examples below.
My Code I'm currently using
https://codesandbox.io/s/lodash-tester-forked-fcdmy1?file=/index.js
Original, unfiltered data from API:
[
{
"_id" : ObjectId("62548802054c225fe560f41a"),
"test" : [
"taetea",
"atty",
],
"Peso" : [
{
"_id" : "624f2ab363dd92f2101de167",
"value" : "255"
}
],
}
]
Expected result for table data:
[
{
"_id" : "62548802054c225fe560f41a",
"test1":"taetea",
"test2":"atty",
"Peso":"255"
},
{
...
},
]
Anyone who can help I'm grateful I will repay with rep+ and my eternal thanks xD
As i understand,you want to use title property from the table Columns & search it in the API data.If the title property represents an array of strings,then add all the strings otherwise add the value property.
const apiData = [
{
"_id" : "62548802054c225fe560f41a",
"test" : [
"taetea",
"atty",
],
"Peso" : [
{
"_id" : "624f2ab363dd92f2101de167",
"value" : "255"
}
],
}
];
const tableData = [
{
title: "Peso",
dataIndex: "peso",
key: "peso",
},
{
title: "test",
children: [
{
title: "ex: ${title} field ${title.length}",
dataIndex: "ex: ${title} + ${title.length}",
key: "ex: ${title} + ${title.length}",
},
{
title: "ex: ${title} field ${title.length}",
dataIndex: "ex: ${title} + ${title.length}",
key: "ex: ${title} + ${title.length}",
},
],
},
];
const tableKeys = tableData.map(t => t.title)
const output = []
apiData.forEach(obj => {
const data = []
Object.keys(obj).filter(key => tableKeys.includes(key)).forEach(key =>{
if(typeof obj[key][0]=== 'string'){
data.push(...obj[key].map((val,index) => ({[`${key}${index+1}`]:val})))
}else{
data.push({[key]: obj[key][0].value})
}
})
// Add the id of the the api data & spread the objects collected
output.push({'_id':obj._id,
...data.reduce((map,elem)=>({...map,...elem}),
{})})
})
console.log('output',output)
I can't google the right solution for this for about an hour straight,
So I'm getting a response from the API that looks like this:
[
{
"Name": "name1",
"Title": "Name One",
"Children": [
{
"Name": "Name 1.1",
"Title": "Name one point one"
},
]
And I need it to fit this kind of "mold" for the data to fit in:
{
title: 'Name One',
value: 'name1',
key: '1',
children: [
{
title: 'Name one point one',
value: 'Name 1.1',
key: 'key1',
},
I am trying to achieve this using a foreach but It's not working as intended because I need to do this all in one instance of a foreach.
Here's what I gave a go to(vue2):
created() {
getData().then(response => {
const formattedResponse = []
response.forEach((el, key) => {
formattedResponse.title = response.Title
formattedResponse.name = response.Name
formattedResponse.children = response.Children
})
})
Use map over the main array and use destructuring assignment to extract the properties by key, and relabel them, and then do exactly the same with the children array. Then return the updated array of objects.
const data=[{Name:"name1",Title:"Name One",Children:[{Name:"Name 1.1",Title:"Name one point one"}]},{Name:"name2",Title:"Name Two",Children:[{Name:"Name 1.2",Title:"Name one point two"}]}];
const result = data.map((obj, key) => {
const { Title: title, Name: value } = obj;
const children = obj.Children.map(obj => {
const { Title: title, Name: value } = obj;
return { title, value, key: (key + 1).toString() };
});
return { title, value, children };
});
console.log(result);
Your API response is JSON. All you need to do is:
var resp=JSON.parse(API response);
I am trying to create an object to use in various places of HTML. It goes a little something like this:
MovieInfo = {
title: Movie.value[0].title,
meta: [
{
name: "description",
content: Movie.value[0].description,
},
{
name: "date",
content: Movie.value[0].releasedate
},
// Try to add objects from another array
Movie.value[1].forEach(function (Cast, index) {
return {
key: Cast.actorname, property: "article:tag", content: Cast.actorname
}
})
]
}
The above does not work. However if I push to the meta array after creating the MovieInfo object then it does work, like so:
MovieInfo = {
title: Movie.value[0].title,
meta: [
{
name: "description",
content: Movie.value[0].description,
},
{
name: "date",
content: Movie.value[0].releasedate
},
]
}
// Try to add objects from another array
Movie.value[1].forEach(function (Cast, index) {
MovieInfo.meta.push({
key: Cast.actorname, property: "article:tag", content: Cast.actorname
})
})
I have to do quite a few of these loops in different areas so I would prefer them to be done while creating MovieInfo than outside of it. Is that possible? That is, is it possible to make my first attempt work by having a loop inside the object creation itself?
You can use an IIFE to do arbitrary things in an object literal (or really, any expression):
const MovieInfo = {
title: Movie.value[0].title,
meta: (() => {
const meta = [
{
name: "description",
content: Movie.value[0].description,
},
{
name: "date",
content: Movie.value[0].releasedate
},
];
for (const cast of Movie.value[1]) {
meta.push({
key: cast.actorname,
property: "article:tag",
content: cast.actorname
});
}
return meta;
})(),
};
In this case, I would however recommend to simply build the array using concat and map:
const MovieInfo = {
title: Movie.value[0].title,
meta: [
{
name: "description",
content: Movie.value[0].description,
},
{
name: "date",
content: Movie.value[0].releasedate
},
].concat(Movie.value[1].map(cast => ({
key: cast.actorname,
property: "article:tag",
content: cast.actorname
}))),
};
In my Vue.js project I have an array of objects which I want to list through and display in the browser.
My array contains four objects, I want to display only 3. The way I choose the 3 objects are dependent on a preference setting that the user has chosen somewhere else in the project and stored in a variable (below it is called userPreference). I am currently stuck on the best and most efficient way to remove one of the objects from my array based on the userPreference value.
My v-for in my template
<ul v-for="item in getOutroItems"><li>item<li></ul>
My object:
data() {
return {
outroItems: [{ title: "outro1", text: "XYZ" }, { title: "outro2", text: "ABC" }, { title: "outro3",
text`enter code here`: "QRS" }, { title: "outro4", text: "TUV" }],
userPreference: ""
};
}
My computed property (this is what I have so far)
getOutroItems() {
this.outroItems.filter((value) => {
if(this.userPreference === "newsletter") {
/// here I want to remove outro2 from my array and return an array with the other 3 values
} else (this.userPreference === "noNewsletter") {
/// here I want to remove outro3 from my array and return an array with the other 3 values
}
})
}
So, what is the best way to remove a specific element from an array?
Thanks in advance, and let me know if anything wasn't clear enough.
Your requirement can be fulfilled by below code as array.filter just wants true or false in its return to accept or remove an element from its array.
getOutroItems() {
this.outroItems.filter((value) => {
if(this.userPreference === "newsletter") {
// here I want to remove outro2 from my array and return an array with the other 3 values
return value.title != 'outro2';
} else (this.userPreference === "noNewsletter") {
// here I want to remove outro3 from my array and return an array with the other 3 values
return value.title != 'outro3';
}
})
}
However if you want to not create another array if it is big. you should go with swapping such elements to be removed with the end indexed element in the array and popping those many elements from the array.
There are multiple ways of getting the correct items from an array.
My preferred method and in your example: Using array.filter
const outroItems = [
{ title: "outro1", text: "XYZ" },
{ title: "outro2", text: "ABC" },
{ title: "outro3", text: "QRS" },
{ title: "outro4", text: "TUV" }
];
const leftOverItems = outroItems.filter((item) => item.title !== "outro2");
console.log(leftOverItems);
Another option is to find the index of the item to remove and then remove it with splice
const outroItems = [
{ title: "outro1", text: "XYZ" },
{ title: "outro2", text: "ABC" },
{ title: "outro3", text: "QRS" },
{ title: "outro4", text: "TUV" }
];
const itemToDelete = outroItems.find((item) => item.title === "outro2");
const indexToDelete = outroItems.indexOf(itemToDelete);
outroItems.splice(indexToDelete, 1);
console.log(outroItems);
Combining any of the functions above with a function will prevent you from writing duplicate code.
const itemToRemove = (arr, attr, name) => {
return arr.filter((item) => item[attr] !== name);
}
const outroItems = [
{ title: "outro1", text: "XYZ" },
{ title: "outro2", text: "ABC" },
{ title: "outro3", text: "QRS" },
{ title: "outro4", text: "TUV" }
];
// Remove from "outroItems" where "title" is "outro2"
const removed2 = itemToRemove(outroItems, "title", "outro2");
// Remove from "outroItems" where "title" is "outro3"
const removed3 = itemToRemove(outroItems, "title", "outro3");
// Remove from "outroItems" where "text" is "TUV"
const removedTUV = itemToRemove(outroItems, "text", "TUV");
console.log(removed2);
console.log(removed3);
console.log(removedTUV);