I have an Array of Objects, once the user fill out and click on the button with id: 'add', I want to push this data into the first master.review.
I tried with push() but I am getting 'list[0].review[j].push is not a function'.
I did some research and I saw I should do like this:
list[0].review[j] = newData
But not even this one is working. Plus I want to add data all the time the user wants to add something.
let list = [
{
master: "Leo",
review: [{
name: 'Bob',
text: 'good'
},
{
name: 'Elly',
text: 'ok ok'
},
]
},
{
master: "Emily",
review: [{
name: 'Greg',
text: 'omg!'
},
{
name: 'Joe',
text: 'SO so..'
},
]
},
]
$('#add').on('click', function() {
let name = document.getElementById('name').value;
let text = document.getElementById('text').value;
let newData = [{
name: name,
text: text,
}]
for (let i = 0; i < list.length; i++) {
for (let j = 0; j < list[i].review.length; j++) {
list[0].review[j].push(newData)
console.log(list)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name" placeholder="Your Name" required/>
<input type="text" id="text" placeholder="Your Name" required/>
<input type="button" id="add" />
You are trying to push into an Object. Method push is not available on type Object. push is available on type Array in javascript. Try below code
list[0].review.push(newData)
There is no need of loop as you want to push the newData object into the list[0]. In order to push into the array use push function - list[0].review.push(newData);
let list = [
{
master: "Leo",
review: [{
name: 'Bob',
text: 'good'
},
{
name: 'Elly',
text: 'ok ok'
},
]
},
{
master: "Emily",
review: [{
name: 'Greg',
text: 'omg!'
},
{
name: 'Joe',
text: 'SO so..'
},
]
},
]
$('#add').on('click', function() {
let name = document.getElementById('name').value;
let text = document.getElementById('text').value;
let newData = {
name: name,
text: text,
};
list[0].review.push(newData);
console.log(list[0].review);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name" placeholder="Your Name" required/>
<input type="text" id="text" placeholder="Your Name" required/>
<input type="button" id="add" value= "add" />
Related
Im trying to map a state property as value to a generated form input with react, but have been unsuccessful so far. The example below shows what im trying to do, but the wrong way as group.value is imported as a string, and wont be compiled into the value of the state variable. Does anyone know how to accomplish this? I need both the final object and property to be dynamically called (in this example frame and brand/year/model)
Map function:
return frameData.map((group) => {
return (
<div className="form-group">
<div className="col-sm-8">
<input
type="text"
className="form-control"
id={group.name}
name={group.name}
placeholder={group.placeHolder}
value={group.value}
onChange={(event) => this.updateValue(event)}
/>
</div>
</div>
);
});
dataset
const frameData = [
{
name: "frame-brand",
placeHolder: "Brand",
value: "{this.state.newSubmission.frame.brand}",
},
{
name: "frame-year",
placeHolder: "Year",
value: "{this.state.newSubmission.frame.year}",
},
{
name: "frame-model",
placeHolder: "Model",
value: "{this.state.newSubmission.frame.model}",
},
];
state
this.state = {
newSubmission:
frame: {
year: "",
model: "",
brand: "",
}
};
what you are trying to achieve is cool, but instead of passing the variable name i,e the entire state object, you can just pass the key and you can assign that to the <input /> component.
const frameData = [
{
name: "frame-brand",
placeHolder: "Brand",
value: "brand",
},
{
name: "frame-year",
placeHolder: "Year",
value: "year",
},
{
name: "frame-model",
placeHolder: "Model",
value: "model",
},
];
and in the map function, you can use
return frameData.map((group) => {
return (
<div className="form-group">
<div className="col-sm-8">
<input
type="text"
className="form-control"
id={group.name}
name={group.name}
placeholder={group.placeHolder}
value={this.state.newSubmission.frame[group.value]}
onChange={(event) => this.updateValue(event)}
/>
</div>
</div>
);
});
Hello I want to filter my data based on checkboxes checked.
I have 3 checkboxes.
<input type="checkbox" name="shoes" value="shoes" class="storesCheckBox" />
<input type="checkbox" name="clothes" value="clothes" class="storesCheckBox" />
<input type="checkbox" name="sports" value="sports" class="storesCheckBox" />
and my stores data is
// my stores
var stores = [
{
id: 1,
store: 'Store 1',
storeType: "shoes"
},
{
id: 2,
store: 'Store 2',
storeType: "clothes"
},
{
id: 3,
store: 'Store 3',
storeType: "sports"
},
{
id: 4,
store: 'Store 3',
storeSells: "shoes"
}
]
So, If I check shoes checkbox, I want to filter the data based on storeType shoes. So I wrote
var getStores = stores.filter(function (store) {
return store.storeType === 'shoes';
});
But Now, if I check clothes and shoes is already checked. I want to filter shoes + clothes data. And If I uncheck, shoes again I want to filter only clothes data. It can be any number of checkboxes depending on the store type. can you please help me out with this?
You can try this:
var storeTypesSelected; //array of the types checked
var getStores = stores.filter(function (store) {
return storeTypesSelected.indexOf(store.storeType) > -1;
});
From the checked checkboxes, construct an array (or Set) of the selected values. Then, when iterating over the array, check whether the current storeType is included in the collection:
var stores = [{
id: 1,
store: 'Store 1',
storeType: "shoes"
},
{
id: 2,
store: 'Store 2',
storeType: "clothes"
},
{
id: 3,
store: 'Store 3',
storeType: "sports"
},
{
id: 4,
store: 'Store 3',
storeType: "shoes"
}
];
document.addEventListener('change', () => {
const checkedValues = [...document.querySelectorAll('.storesCheckBox')]
.filter(input => input.checked)
.map(input => input.value);
const filteredStores = stores.filter(({ storeType }) => checkedValues.includes(storeType));
console.log(filteredStores);
});
Shoes: <input type="checkbox" name="shoes" value="shoes" class="storesCheckBox" />
Clothes: <input type="checkbox" name="clothes" value="clothes" class="storesCheckBox" />
Sports: <input type="checkbox" name="sports" value="sports" class="storesCheckBox" />
All you need is to hold the checkbox values for filtering in an array.
var elems = document.getElementsByClassName("storesCheckBox");
var list = [];
for(var i=0; elems[i]; ++i){
if(elems[i].checked){
list.push(elems[i].value);
}
}
var getStores = stores.filter(function (store) {
return list.indexOf(store.storeType) >= 0;
});
The return statement will do the filtering with indexOf function.
I have a form with ng-model="award.myProperty". There are some inputs and texareas. In my service I have an array for textareas:
allQuestions = [
id: 'XXX', question: 'some text',
id: 'YYY', question: 'some text',
id: 'ZZZ', question: 'some text',
];
My goal is to get data from textareas in such structure
questions: [{
'XXX': 'data from textarea1',
'YYY': 'data from texarea2',
'ZZZ': 'data from textarea3',
}];
I've tried to use ng-repeat with ng-model, but ng-model doesn't return ID's. If I use $index with ng-repeat then I get an array:
[{ 0: 'data from textarea1',
1: 'data from textarea2',
2: 'data from textarea3',}]
Structure is good, but that's not my ID's from service.
SERVICE
const allQuestions = [
{ id: 'XXX', question: 'question1' },
{ id: 'YYY', question: 'question2' },
{ id: 'ZZZ', question: 'question3' },
];
getQuestion() {
return allQuestions;
},
CONTROLLER
$scope.allQuestions = awards_service.getQuestion();
$scope.award = {
description: '',
questions: [],
};
VIEW
<form name="awardForm">
<input ng-model="award.description"></input>
<div ng-repeat="question in allQuestions">
<textarea ng-model="award.questions"></textarea>
</div>
</form>
Maybe there is a better solution than ng-repeat.
In your controller change $scopre.award.questions to:
$scope.allQuestions = awards_service.getQuestion();
$scope.award = {
description: '',
questions: [{}]
};
Then in the view:
<form name="awardForm">
<input ng-model="award.description"></input>
<div ng-repeat="question in allQuestions">
<textarea ng-model="award.questions[0][question.id]"></textarea>
</div>
</form>
Demo:
angular.module("myApp", [])
.controller('myCtrl', ['awards_service', '$scope', function(awards_service, $scope) {
$scope.allQuestions = awards_service.getQuestion();
$scope.award = {
description: '',
questions: [{}],
};
$scope.submit = function() {
console.log($scope.award);
// submit your form then reset the award object
// ...
$scope.award = {
description: '',
questions: [{}],
};
}
}])
.factory('awards_service', function() {
const allQuestions = [
{ id: 'XXX', question: 'question1' },
{ id: 'YYY', question: 'question2' },
{ id: 'ZZZ', question: 'question3' },
];
return {
getQuestion() {
return allQuestions;
}
}
});
.as-console-wrapper { height: 70px !important; overflow: auto; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form name="awardForm" ng-submit="submit()">
<label>Description</label><br>
<input ng-model="award.description"></input><br>
<label>Questions</label><br>
<div ng-repeat="question in allQuestions">
<textarea ng-model="award.questions[0][question.id]" placeholder="Enter a question"> </textarea>
</div>
<input type="submit" value="submit" />
</form>
</div>
</div>
I have an objects formatted like this:
id: 1,
name: MyObj
properties: {
owners: [
{
name:owner1,
location: loc1
},
{
name:owner2,
location: loc1
}
]
}
Number of owners is different for each object. When I try to filter it using ng-repeat with filter:searchBox and search box inputs
<input name="search-filter" class="form-control" type="search" ng-model="searchBox.properties.title" />
<input name="search-filter" class="form-control" type="search" ng-model="searchBox.properties.owners" />
filtering by title works perfectly, however owners filtering doesn't work at all but I supposed it will filter based on both location and name. What am I doing wrong?
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.objs =
{
id: 1,
name: 'MyObj',
properties: {
owners: [
{
name: 'owner1',
location: 'loc1'
},
{
name: 'owner2',
location: 'loc2'
}
]
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input name="search-filter" class="form-control" type="search" placeholder="Search by location" ng-model="searchBox.properties.location" />
<input name="search-filter" class="form-control" type="search" placeholder="Search by name" ng-model="searchBox.properties.owners" />
<div ng-repeat="owner in objs.properties.owners | filter:{'location': searchBox.properties.location} |filter:{'name': searchBox.properties.owners}">
{{owner}}
</div>
</div>
You can filter manually
var list = [
{
id: 1,
name: 'MyObj',
properties: {
owners: [
{
name: 'owner1',
location: 'loc1'
},
{
name: 'owner2',
location: 'loc1'
}
]
}
}
];
function filter(filter) {
return list.filter(function(item) {
return item.properties.owners.find(function(owner) {
return Object.keys(filter).every(function(key) {
return filter[key] === owner[key];
});
});
});
}
console.log(filter({ name: 'owner1', location: 'loc1' }));
I used es6 shim for that.
I am using select2 from https://github.com/angular-ui/ui-select2
// I have two input select2 box inside one controller
<form ng-controller="MyCtrl">
<input
type="text"
ui-select2="select2Options"
ng-model="bookmarks"
>
<input
type="text"
ui-select2="select2Options"
ng-model="products"
>
</form>
//In controller I have list of bookmarks and products I am trying something like below but it is not working and both the input box ended up with same data i.e. products.
function MyCtrl($scope){
var bookmarks=[
{id:0,text:"enhancement"},
{id:1,text:"bug"},
{id:2,text:"duplicate"},
{id:3,text:"invalid"},
{id:4,text:"wontfix"}
];
$scope.select2Options = {
multiple: true,
width: "300px",
data:bookmarks
};
var products=[
{id:0,text:"Product1"},
{id:1,text:"Product2"},
{id:2,text:"Product3"},
{id:3,text:"Product4"},
{id:4,text:"Product5"}
];
$scope.select2Options = {
multiple: true,
width: "300px",
data:products
};
}
As you see above code will convert two input box in to select2 input boxes but both box will have products data. I want bookmark input box filled with bookmarks and product input box with products.
You need to use 2 separate scope property to store the options for bookmarks and products. In your case the product options is overriding bookmarks options also since the same property is used for both.
Try
<form ng-controller="MyCtrl">
<input type="text" ui-select2="bookmarksSelect2Options" ng-model="bookmarks">
<input type="text" ui-select2="productsSelect2Options" ng-model="products">
</form>
and
function MyCtrl($scope) {
var bookmarks = [{
id: 0,
text: "enhancement"
}, {
id: 1,
text: "bug"
}, {
id: 2,
text: "duplicate"
}, {
id: 3,
text: "invalid"
}, {
id: 4,
text: "wontfix"
}];
$scope.bookmarksSelect2Options = {
multiple: true,
width: "300px",
data: bookmarks
};
var products = [{
id: 0,
text: "Product1"
}, {
id: 1,
text: "Product2"
}, {
id: 2,
text: "Product3"
}, {
id: 3,
text: "Product4"
}, {
id: 4,
text: "Product5"
}];
$scope.productsSelect2Options = {
multiple: true,
width: "300px",
data: products
};
}