How to filter all the fields in react?
I have written a code which only filters specified fields.
let filteredContacts=this.props.contacts.filter(
(contact)=>{
return contact.name.indexOf(this.state.search)!==-1;
}
);
the above code only returns filtered names...but i want to filter name,age,city work.
this is the data file:
export default function(){
return [{
key: 1,
name: 'Steve',
city: 'Paris',
}, {
key: 2,
name: 'Tim',
city: 'London',
}, {
key: 3,
name: 'Stella',
city: 'Bankok',
}, {
key: 4,
name: 'John',
city: 'Paris',
}];
}
i want to create a search bar which which filters all the fields suppose if i search john then the list of john should be displayed and if i search paris then all the entries which have paris should be displayed..So the code which i have written only searches for name as i have specified name..i want to search the inputed data to search all the fields.
The filter criteria can be the indexOf on Object.values() like below but it will only give a complete match
var data = [{
key: 1,
name: 'Steve',
city: 'Paris',
}, {
key: 2,
name: 'Tim',
city: 'London',
}, {
key: 3,
name: 'Stella',
city: 'Bankok',
}, {
key: 4,
name: 'John',
city: 'Paris',
}];
var value = 'Paris'
var newData = data.filter((obj) => {
return Object.values(obj).indexOf(value) > -1
})
console.log(newData)
Well, I fastly tried, do a loop on your keys. Maybe there's a more elegant way.
let filteredContacts=this.props.contacts.filter(
(contact)=>{
var found = false;
Object.keys(contact).map(function(key, index) {
if (contact[key].indexOf(this.state.search) >= 0)
found = true;
}
return found;
}
);
Related
var arr = [
{ id: 1, name: 'Ahmed Malick', school: 'TEWGS' },
{ id: 2, name: 'Tehmeed Anwar', school: 'DGS' },
{ id: 3, name: 'Azhar Yameen', school: 'DGS' }
]
I want this output:
The student name is his id is and he studies in
Can you please show me what kind of output you expect. Then i will try to solve it.
I'm not sure if this is what you want
var arr = [
{ id: 1, name: "Ahmed Malick", school: "TEWGS" },
{ id: 2, name: "Tehmeed Anwar", school: "DGS" },
{ id: 3, name: "Azhar Yameen", school: "DGS" },
];
arr.map((student) => {
return `Name: ${student.name}, id: ${student.id}, he studies in: ${student.school}`;
}).forEach((output) => {
console.log(output);
});
If you want it in the DOM do this
let html = arr.map((student) => {
return `<p><strong>Name</strong>: ${student.name}, <strong>id</strong>: ${student.id},<strong> he studies in</strong> ${student.school}</p>`;
}).join("")
document.createElement("div").innerHTML = html
Try thatGood luck
How can i sort the data and print in react.
which libraries do i need to use ?
here is the data which is to be sorted field wise
data = [{
key: 1,
name: 'Steve',
city: 'Paris',
}, {
key: 2,
name: 'Tim',
city: 'London',
}, {
key: 3,
name: 'Stella',
city: 'Bankok',
}, {
key: 4,
name: 'John',
city: 'Paris',
}];
Use Array.prototype.sort() for this.
Check this example:
data = [{
key: 1,
name: 'Steve',
city: 'Paris',
}, {
key: 2,
name: 'Tim',
city: 'London',
}, {
key: 3,
name: 'Stella',
city: 'Bankok',
}, {
key: 4,
name: 'John',
city: 'Paris',
}];
data.sort((a,b) => a.name > b.name);
console.log('updated data', data)
I am new in angular js. I have one array object as
var data = [{ id:1, name: 'Adam', email: 'adam#email.com', age: 12},
{ id:2, name: 'Amalie', email: 'amalie#email.com', age: 12}];
Now, I want data as
var data_id = [{1},{2}];
So what should I have to get only id list from array object?
In Javascript, Objects are having key and value both.
var obj = {
myKey: value,
}
You can try JavaScript array.map() method. It will return the array with the elements you want to access.
var data = [{ id:1, name: 'Adam', email: 'adam#email.com', age: 12},
{ id:2, name: 'Amalie', email: 'amalie#email.com', age: 12}];
var result = data.map(function(item) {
return item.id;
});
console.log(result);
EDIT: Question has been updated.
The format you want the data in ([{1},{2}]) cannot be achieved. A javascript object has to have a key and a value. so, {1} is invalid.
But on the other hand if it's just the ids you want ([1,2]), see the mapping below and instead of returning {id: item.id}, just return item.id.
var data = [{ id:1, name: 'Adam', email: 'adam#email.com', age: 12},
{ id:2, name: 'Amalie', email: 'amalie#email.com', age: 12}];
// [{id: 1, {id: 2}}]
var data_id = data.map(function(item){
return { id: item.id};
});
// [1, 2]
var data_id = data.map(function(item){
return item.id;
});
If you're using ES6, you could simplify the code
var data_id = data.map(item => ({ id: item.id}));
You can use javascript map function to extract just the id.
See https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map
**please anyone can help me i want to print list in Angularjs like this **
enter image description here
Use Order by
$scope.friends = [
{name: 'John', phone: '555-1212', age: 10},
{name: 'Mary', phone: '555-9876', age: 19},
{name: 'Mike', phone: '555-4321', age: 21},
{name: 'Adam', phone: '555-5678', age: 35},
{name: 'Julie', phone: '555-8765', age: 29}
];
<tr ng-repeat="friend in friends | orderBy:'name'">
read more here
You have to filter each group by the letters you want. Here's a Plunker Using this list:
$scope.myList = [{
id: 11,
name: 'Okra'
}, {
id: 12,
name: 'Musa'
}, {
id: 4,
name: 'Sky'
}, {
id: 13,
name: 'India'
}, {
id: 14,
name: 'Rose'
}, {
id: 15,
name: 'Titanic'
}, {
id: 16,
name: 'Onion'
}, {
id: 6,
name: 'Germany'
}, {
id: 17,
name: 'Beer'
}, {
id: 18,
name: 'Run'
}, {
id: 2,
name: 'Garden'
}, {
id: 19,
name: 'Mountain'
}]
One function to get the alphabets between the two:
function genCharArray(charA, charZ) {
var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
for (; i <= j; ++i) {
a.push(String.fromCharCode(i));
}
return a;
};
Then your filter:
app.filter("cfilter", function () {
return function (input, x, y) {
var groups = [];
var letters = genCharArray(x, y);
for (var i = 0; i < input.length; i++) {
for (var x = 0; x < letters.length; x++) {
if (input[i].name.substring(0, 1) == letters[x])
groups.push(input[i]);
}
} return groups;
}
});
And your HTML:
<div ng-repeat="w in myList | cfilter: 'A':'H' | orderBy: 'name'">
<div>{{w.name}}</div>
</div>
create one directive pass an array of letter and range of alphabates you want to disaply.
<dummy-directive data="arrayData" range="A-G"></dummy-directive>
<dummy-directive data="arrayData" range="H-L></dummy-directive>
<dummy-directive data="arrayData" range="M-P"></dummy-directive>
<dummy-directive data="arrayData" range="Q-Z"></dummy-directive>
Now question is that how to implement directive?
we will display sorted data.
I am trying an example with backgrid paging. I have to edit a cell content on click of edit button then save the updated cell content to the server. Here iam rendering the buttons using backgrid cell extention but not able to figure it out how to enable a cell for editing on click of the button.
Here is the sample am trying.. In EditCell i have a method editRow in which i have to perform the updation.
Thanks
(function(){
//Namespacing the views collections and models
window.App = {
Models: {},
Views: {},
Collections: {},
Helpers: {}
},
//Template helper to load the template of any id
App.Helpers.template = function(id){
return _.template($('#' + id).html());
}
//Person Model
App.Models.Person = Backbone.Model.extend({});
//Person collection - People
App.Collections.People = Backbone.PageableCollection.extend({
model: App.Models.Person,
state: {
pageSize: 10
},
mode: "client"
});
var personCollection = new App.Collections.People([
{
id: 1,
name: 'Trim',
age: 33,
occupation: 'Dotnet Programmer'
},
{
id: 2,
name: 'Crum',
age: 25,
occupation: 'Developer'
},
{
id: 3,
name: 'Drum',
age: 46,
occupation: 'Designer'
},
{
id: 4,
name: 'Srum',
age: 27,
occupation: 'Java Programmer'
},
{
id: 5,
name: 'Vrum',
age: 24,
occupation: 'Developer'
},
{
id: 6,
name: 'Brum',
age: 29,
occupation: 'Designer'
},
{
id: 7,
name: 'Frum',
age: 33,
occupation: 'Dotnet Programmer'
},
{
id: 8,
name: 'Jrum',
age: 25,
occupation: 'Developer'
},
{
id: 9,
name: 'Lrum',
age: 46,
occupation: 'Designer'
},
{
id: 10,
name: 'Hrum',
age: 27,
occupation: 'Java Programmer'
},
{
id: 11,
name: 'Prum',
age: 24,
occupation: 'Developer'
},
{
id: 12,
name: 'Zrum',
age: 29,
occupation: 'Designer'
}
]
);
var EditCell = Backgrid.Cell.extend({
template: _.template('<button>Edit</button>'),
events: {
"click": "editRow"
},
editRow: function (e) {
e.preventDefault();
//Enable the occupation cell for editing
//Save the changes
//Render the changes.
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
this.delegateEvents();
return this;
}
});
var columns = [{
name: "id",
label: "ID",
editable: false,
cell: Backgrid.IntegerCell.extend({
orderSeparator: ''
})
}, {
name: "name",
label: "Name",
cell: "string"
}, {
name: "age",
label: "Age",
cell: "integer"
}, {
name: "occupation",
label: "Occupation",
cell: "string"
}, {
name: "actions",
label: "Actions",
cell: EditCell
}];
// Initialize a new Grid instance
var grid = new Backgrid.Grid({
columns: columns,
collection: personCollection
});
var paginator = new Backgrid.Extension.Paginator({
collection: personCollection
});
// Render the grid and attach the root to your HTML document
$("#grid").append(grid.render().el);
$("#paginator").append(paginator.render().$el);
})();
the following code solved my problem.. With the below code we can make each cell editable/noneditable depending upon a condition. Still looking for a better approach to Enable editing on edit button click.
(function(){
//Person Model
var Person = Backbone.Model.extend({
});
//Person collection - People
var People = Backbone.Collection.extend({
model: Person
});
var personCollection = new People([
{
id: 1,
name: 'Trim',
age: 33,
occupation: 'Dotnet Programmer'
},
{
id: 2,
name: 'Crum',
age: 25,
occupation: 'Developer'
},
{
id: 3,
name: 'Drum',
age: 46,
occupation: 'Designer'
},
{
id: 4,
name: 'Srum',
age: 27,
occupation: 'Java Programmer'
},
{
id: 5,
name: 'Vrum',
age: 24,
occupation: 'Developer'
},
{
id: 6,
name: 'Brum',
age: 29,
occupation: 'Designer'
},
{
id: 7,
name: 'Frum',
age: 33,
occupation: 'Dotnet Programmer'
},
{
id: 8,
name: 'Jrum',
age: 25,
occupation: ''
},
{
id: 9,
name: 'Lrum',
age: 46,
occupation: ''
},
{
id: 10,
name: 'Hrum',
age: 27,
occupation: 'Java Programmer'
},
{
id: 11,
name: 'Prum',
age: 24,
occupation: 'Developer'
},
{
id: 12,
name: 'Zrum',
age: 29,
occupation: 'Designer'
}
]
);
var MyCell = Backgrid.Cell.extend({
initialize: function (options) {
MyCell.__super__.initialize.apply(this, arguments);
this.listenTo(this.model, "backgrid:edited", this.doSomething);
},
doSomething: function () {
console.log('something');
},
enterEditMode: function () {
this.$el.width((this.$el.outerWidth() - 10) + 'px');
Backgrid.Cell.prototype.enterEditMode.apply(this, arguments);
},
exitEditMode: function () {
this.$el.width(false);
Backgrid.Cell.prototype.exitEditMode.apply(this, arguments);
}
});
var columns = [{
name: "id", // The key of the model attribute
label: "ID", // The name to display in the header
editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
// Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
cell: "string", //Backgrid.IntegerCell.extend({ tagName: "td style='text-align:left'" })
editable:false,
isEnabled: false
}, {
name: "name",
label: "Name",
// The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
cell: "string", // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
editable:false
}, {
name: "age",
label: "Age",
cell: "string", // An integer cell is a number cell that displays humanized integers
editable: false
}, {
name: "occupation",
label: "Occupation",
cell: MyCell, // A cell type for floating point value, defaults to have a precision 2 decimal numbers
editable: function (c, m) {
if (typeof(c.collection) === 'undefined')
return false;
else
return (c.attributes.age <= 30) ? true : false;
}
}];
// Initialize a new Grid instance
var grid = new Backgrid.Grid({
columns: columns,
collection: personCollection
});
// Initialize a client-side filter to filter on the client
// mode pageable collection's cache.
var filter = new Backgrid.Extension.ClientSideFilter({
collection: personCollection,
fields: ['name']
});
// Render the grid and attach the root to your HTML document
$("#grid").append(grid.render().el);
$("#grid").before(filter.render().el);
})();