function removeRed(foodArray) {
return foodArray.filter(function (food) {
return food.color !== "red";
});
}
document.write(
removeRed([
{ name: "Apple", color: "red" },
{ name: "Egg", color: "white" },
{ name: "orange", color: "orange" },
])
);
console.log(
removeRed([
{ name: "Apple", color: "red" },
{ name: "Egg", color: "white" },
{ name: "orange", color: "orange" },
])
);`
I am getting the desired result in the console log but the document.write is giving the output-"[object Object],[object Object] "
Can someone explain to me what is going on?your text
The simplest answer would be that console. log("") outputs whatever is passed as the parameter. document. write("") adds whatever you want to html.
Related
My data looks like this
{
"_id": "62f77d806f24c09f0acae163",
"name": "Test product",
"attributes": [
{
"attribute_name": "Shape",
"attribute_value": "Square"
},
{
"attribute_name": "Color",
"attribute_value": "Red"
}
]
}
I am using the aggregate method to filter results where I want to find products where "attribute_name" is "shape" and the "attribute_value" is "Square" AND "attribute_name" is "Color" and the "attribute_value" is "Red"
Basically I am building a filter feature in my application and basis the data passed to the API I want to get the products.
I have tried this:
let lookup = {
$match: {
$and: [
{
'attributes.attribute_label': 'Shape',
'attributes.attribute_value': {
$in: ['Square']
},
},
{
'attributes.attribute_label': 'Color',
'attributes.attribute_value': {
$in: ['Red']
},
}
],
}
};
let products = await productsModel.aggregate(lookup);
At first it seemed like it worked, but then I noticed it doesn't work properly, it matches
'attributes.attribute_value': {
$in: ['Red']
},
so if it finds "Red" in "attribute_label" which can be anything other than "Color" it will still return the results.
Any help is appreciated
I want to be able to get results based on the values for each attribute name
For e.g data passed might be this
Shape=Square,Color=Red,Green
I want to get the products which matches this, where the object with attribute_label of Color contains the attribute_value of Red or Green.
Is it a typo? Once you are using "attributes.attribute_label" and once "attributes.attribute_name".
This should work with attributes.attrubite_name (not label!)
[
{
'$match': {
'$and': [
{
'attributes.attribute_name': 'Shape'
}, {
'attributes.attribute_value': {
'$in': [
'Square'
]
}
}, {
'attributes.attribute_name': 'Color'
}, {
'attributes.attribute_value': {
'$in': [
'Red'
]
}
}
]
}
}
]
I have a very basic knowledge of Javascript. I am writing a plugin to search for some predefined colors and replace them with new colors. So far I am able to get an array containing colors, name and styles as an object inside the array.
Now I want to search for a certain color like - eb40a2 and replace it with ffffff and push this new value to a new array.
var ref=[];
....
ref.push({ name: styleName, color: styleColor, parent: styleParent, styles: styleId });
which is giving me the following array:
0: {name: "pink_theme/dark/fill/active", color: "eb40a2", styles: "S:5bebabedaa118ab6d135df59d7ba8861c05992a0,5:1"}
1: {name: "green_theme/light/fill/product", color: "c85200", styles: "S:380f15d999c08d9d97725c9915f479e52c1a343c,244:13"}
2: {name: "green_theme/light/fill/active", color: "00880d", styles: "S:b2aecc5927c659d7fba7d021b092bc90618043a5,189:0"}
3: {name: "green_theme/light/fill/product", color: "0081a0", styles: "S:1f28c38bfa1b10ca61aeaf706ac2a71fa6425950,244:11"}
You can map over the array and conditionally update the colors you want. Check the code snippet below:
const arr = [
{
name: 'pink_theme/dark/fill/active',
color: 'eb40a2',
styles: 'S:5bebabedaa118ab6d135df59d7ba8861c05992a0,5:1',
},
{
name: 'green_theme/light/fill/product',
color: 'c85200',
styles: 'S:380f15d999c08d9d97725c9915f479e52c1a343c,244:13',
},
{
name: 'green_theme/light/fill/active',
color: '00880d',
styles: 'S:b2aecc5927c659d7fba7d021b092bc90618043a5,189:0',
},
{
name: 'green_theme/light/fill/product',
color: '0081a0',
styles: 'S:1f28c38bfa1b10ca61aeaf706ac2a71fa6425950,244:11',
},
];
const newArr = arr.map(el => el.color === "eb40a2" ? {...el, color: "ffffff"}: el)
console.log(newArr)
This is what my initial state looks like:
Fruits: {
34: {
FruitsID: 34,
FruitsList:{apple, pineapple, banana}
}
}
Here, I want to add fruit items such as 'peach' or 'pear' and remove 'apple' and 'banana'.
My 'add fruits' reducer returns what I wrote below, but it seems like this is not working because of the id. However, I do need to use id since there will be several fruit lists, not only one.
ex: Fruits:{ 23: {...}, 3980: {...}, 129: {...} }
Fruits: {
[action.id]: {
…state.Fruits[action.id],
FruitsID: action.id,
FruitsList: {
...state.Fruits[action.id].FruitsList.push(action.fruit),
},
},
}
I tried reading several related posts, but couldn't find the one that's applicable for my case.
if I do this(below), then there's a syntax error under action.fruit saying that it expected ','?
Fruits: {
[action.id]: {
…state.Fruits[action.id],
FruitsID: action.id,
FruitsList: {
...state.Fruits[action.id].FruitsList,
action.fruit
},
},
}
i test this and had two problem:
Fruits: {
[action.id]: {
…state.Fruits[action.id],
FruitsID: action.id,
FruitsList: {
...state.Fruits[action.id].FruitsList,
action.fruit
},
},
}
1- in this line …state.Fruits[action.id], three dot seems not to be dot characters that should be, type it again or copy it= "..."!
2- convert this line " action.fruit" to this: "fruit:action.fruit"
so currect code is like this:
Fruits: {
[action.id]: {
...state.Fruits[action.id],
FruitsID: action.id,
FruitsList: {
...state.Fruits[action.id].FruitsList,
fruit:action.fruit
}
}
}
}
I'm trying to create a list and append values to it that I've retrieved from xml http request. I've tested just a text block with the value of typeAssetProcess and it prints fine, but when I start trying to use a list is when everything starts to break. What am I doing wrong and how can I fix it?
import QtQuick 2.0
import "../controls" as Controls
Item {
Column {
id: column
width: parent.width
height: parent.height
}
ListView {
id: listView
width: parent.width
height: parent.height
model: ListModel {
ListElement {
name: qstr("Proccess: %1").arg(typeAssetProcess)
colorCode: "grey"
}
ListElement {
name: "Red"
colorCode: "red"
}
ListElement {
name: "Blue"
colorCode: "blue"
}
ListElement {
name: "Green"
colorCode: "green"
}
}
delegate: Item {
x: 5
width: 80
height: 40
Row {
id: row1
Rectangle {
width: 40
height: 40
color: colorCode
}
Text {
text: name
font.bold: true
anchors.verticalCenter: parent.verticalCenter
}
spacing: 10
}
}
}
}
This code is what is breaking:
ListElement {
name: qstr("Proccess: %1").arg(typeAssetProcess)
colorCode: "grey"
}
This is a known limitation to the ListElement type, containing a "collection of role definitions instead of properties". This is why you can not use script or property binding for these roles (otherwise you get the error ListElement: cannot use script for property value).
Improvements are frequently requested to the Qt team but as far as I know there is no implementation yet.
One thing you can do is dynamically initialize the model instead of using fixed ListElement:
ListView {
id: listView
readonly property var modelElements: [
{
name: qsTr("Proccess: %1").arg(typeAssetProcess),
colorCode: "grey"
},
{
name: "Red",
colorCode: "red"
},
{
name: "blue",
colorCode: "blue"
},
{
name: "Green",
colorCode: "green"
}]
Component.onCompleted: {
modelElements.forEach(function(element) {
model.append(element)
})
}
width: parent.width
height: parent.height
model: ListModel {}
delegate: ...
}
You can also choose to implement your own model in C++.
I have a question regarding what is the best structure for a react component which is composed from another components.
So the first one is :
<ColorSelect id="color"
label={this.state.selectLabel}
trigger={{ color: "lime", text: "Lime"}}
onPropagateClick={this.changed}>
<ColorOption color="yellow" text="Yellow" onPropagateClick={ColorSelect.optionClicked}/>
<ColorOption color="orange" text="Orange" onPropagateClick={ColorSelect.optionClicked}/>
<ColorOption color="red" text="Red" onPropagateClick={ColorSelect.optionClicked}/>
</ColorSelect>
here the problem is that I cannot access the ColorSelect functions from ColorOption
and second :
<ColorSelect id="color"
label={this.state.selectLabel}
trigger={{ color: "lime", text: "Lime"}}
onPropagateClick={this.changed}>
options={[
{ color: "yellow", text: "Yellow" },
{ color: "orange", text: "Orange" },I have a question regarding what is the best structure for a react component which is composed from another components.
So the first one is :
<ColorSelect id="color"
label={this.state.selectLabel}
trigger={{ color: "lime", text: "Lime"}}
onPropagateClick={this.changed}>
<ColorOption color="yellow" text="Yellow" onPropagateClick={ColorSelect.optionClicked}/>
<ColorOption color="orange" text="Orange" onPropagateClick={ColorSelect.optionClicked}/>
<ColorOption color="red" text="Red" onPropagateClick={ColorSelect.optionClicked}/>
</ColorSelect>
here the problem is that I cannot access the ColorSelect functions from ColorOption
and second :
<ColorSelect id="color"
label={this.state.selectLabel}
trigger={{ color: "lime", text: "Lime"}}
onPropagateClick={this.changed}>
options={[
{ color: "yellow", text: "Yellow" },
{ color: "orange", text: "Orange" },
{ color: "red", text: "Red"} />
In these example the component is not easy to reuse because I want to have a component where I can send the properties in json format
A component sees only its one props, but its parent can pass a method as a prop. This is how you may write ColorOption.
var ColorOption = React.createClass({
render: function() {
return <div style={{color: this.props.color}}
onClick={this.props.onSelect.bind(null, this.props.text)}
>{this.props.text}</div>
}
})
Notice that when the div emits a click event, ColorOption calls its onSelect prop (with its text prop as argument). onSelect must be passed by the parent, and this is exactly what ColorSelect does.
var ColorSelect = React.createClass({
handleSelect: function(text) {
console.log('Color selected:', text)
},
render: function() {
var options = this.props.options.map(function(option) {
return <ColorOption key={option.color} color={option.color}
text={option.text} onSelect={this.handleSelect} />
}.bind(this))
return <div>{options}</div>
}
})
ColorSelect takes an options prop, which must be an array, and turns it into an array of ColorOptions. Moreover, it passes its handleSelect method to each child, so that they can call it.
var options = [
{ color: "yellow", text: "Yellow" },
{ color: "orange", text: "Orange" },
{ color: "red", text: "Red"},
]
React.renderComponent(<ColorSelect options={options} />, document.body)
That's it.