user1896653
Reputation: 3327
How to check a set of object is exist in another array object by jQuery
My array, stored in variable named data:
var data = [
{
"name": "username",
"value": null,
"schema": {
"version": 1,
"name": "form.text"
}
},
{
"name": "password",
"value": null,
"schema": {
"version": 1,
"name": "form.text"
}
},
{
"name": "gender",
"value": "other",
"schema": {
"version": 1,
"value_type": "string",
"name": "form.select",
"choices": [
{
"value": "male",
"label": "Male"
},
{
"value": "female",
"label": "Female"
},
{
"value": "other",
"label": "Other"
}
]
}
},
{
"name": "country",
"value": "3",
"schema": {
"version": 1,
"value_type": "string",
"name": "form.select",
"choices": [
{
"value": "1",
"label": "Australia"
},
{
"value": "2",
"label": "USA"
},
{
"value": "3",
"label": "UK"
}
]
}
},
{
"name": "decision",
"value": "not sure",
"schema": {
"version": 1,
"value_type": "string",
"name": "form.text",
"choices": [
{
"value": "yes",
"label": "Yes"
},
{
"value": "no",
"label": "No"
},
{
"value": "not sure",
"label": "I am not sure"
}
]
}
},
{
"name": "hobby",
"value": "['book', 'movie']",
"schema": {
"version": 1,
"value_type": "string",
"name": "form.text",
"choices": [
{
"value": "travel",
"label": "Traveling"
},
{
"value": "book",
"label": "Reading"
},
{
"value": "movie",
"label": "Watching Movie"
}
]
}
},
{
"name": "privacy",
"value": null,
"schema": {
"version": 1,
"name": "form.text"
}
},
{
"name": "message",
"value": null,
"schema": {
"version": 1,
"name": "form.text"
}
}
]
My object, stored in variable named formObj:
var formObj = {
username: {
value: null,
type: 'text',
label: 'Username',
placeholder: 'Enter username',
position: 'left',
block: 'firstRow',
order: 1,
additionalClass: 'user'
},
password: {
value: null,
type: 'password',
label: 'Password',
placeholder: 'enter password',
position: 'left',
block: 'firstRow',
order: 2
},
country: {
value: '3',
type: 'select',
label: 'Where are you form?',
//defaultText: 'Choose here',
position: 'right',
block: 'firstRow',
order: 2,
option: [{
value: '1',
label: 'Australia'
},
{
value: '2',
label: 'USA'
},
{
value: '3',
label: 'UK'
}
]
},
gender: {
value: 'female',
type: 'select',
label: 'Gender',
defaultText: null,
position: 'right',
block: 'firstRow',
order: 1,
option: [{
value: 'male',
label: 'Male'
},
{
value: 'female',
label: 'Female'
},
{
value: 'other',
label: 'Other',
additionalAttr: 'disabled'
}
]
},
decision: {
value: 'not sure',
type: 'radio',
label: 'Have you enjoyed it?',
position: 'left',
block: 'secondRow',
order: 1,
option: [{
value: 'yes',
label: 'Yes',
additionalAttr: 'disabled'
},
{
value: 'no',
label: 'No',
},
{
value: 'not sure',
label: 'I am not sure',
}
]
},
message: {
value: null,
type: 'textarea',
label: 'Message',
placeholder: 'type your message',
position: 'right',
block: 'secondRow',
order: 2,
},
vehicle: {
value: 'car',
type: 'checkbox',
label: 'Preferred vehicles',
position: 'left',
block: 'secondRow',
order: 2,
option: [{
value: 'car',
label: 'I like car'
},
{
value: 'bike',
label: 'I prefer bike'
},
{
value: 'boat',
label: 'Boat is my favorit'
}
]
},
hobby: {
value: ['book', 'movie'],
type: 'checkbox',
label: 'Hobbies',
position: 'left',
block: 'secondRow',
order: 3,
option: [{
value: 'travel',
label: 'Traveling'
},
{
value: 'book',
label: 'Reading'
},
{
value: 'movie',
label: 'Watching movie'
}
]
},
privacy: {
value: null,
type: 'checkbox',
label: 'Privacy',
position: 'right',
block: 'secondRow',
order: 3,
option: [{
value: 'agree',
label: 'I agree'
}
]
},
email: {
value: null,
type: 'text',
label: 'Email',
placeholder: 'Enter email',
position: 'right',
block: 'secondRow',
order: 1,
additionalAttr: 'disabled',
additionalClass: 'emailbox custom'
}
}
So, there are 8 objects in the data(array) and 10 objects in the formObj(object).
My target is matching the name from data with formObj, and create new object with the matched object only. All the value of the new object should come from the data(array). In short, create a newObj like/from formObj. newObj will not contain the object which are not in the data(array).
I have tried to write the concept here just, but don't understand how to go ahead:
for (var i = 0; i < data.length; i++) {
if (data[i].name === formObj[key]) {
newObj = formObj; // take only those from formObj which exist in data
newObj[option] = data[schema][choices]; // take the option from choices
newObj[value] = data[value]; // take the value from value
}
}
So, the newObj will be:
var newObj = {
username: {
value: null,
type: 'text',
label: 'Username',
placeholder: 'Enter username',
position: 'left',
block: 'firstRow',
order: 1,
additionalClass: 'user'
},
password: {
value: null,
type: 'password',
label: 'Password',
placeholder: 'enter password',
position: 'left',
block: 'firstRow',
order: 2
},
country: {
value: '3',
type: 'select',
label: 'Where are you form?',
//defaultText: 'Choose here',
position: 'right',
block: 'firstRow',
order: 2,
option: [{
value: '1',
label: 'Australia'
},
{
value: '2',
label: 'USA'
},
{
value: '3',
label: 'UK'
}
]
},
gender: {
value: 'other',
type: 'select',
label: 'Gender',
defaultText: null,
position: 'right',
block: 'firstRow',
order: 1,
option: [{
value: 'male',
label: 'Male'
},
{
value: 'female',
label: 'Female'
},
{
value: 'other',
label: 'Other',
additionalAttr: 'disabled'
}
]
},
decision: {
value: 'not sure',
type: 'radio',
label: 'Have you enjoyed it?',
position: 'left',
block: 'secondRow',
order: 1,
option: [{
value: 'yes',
label: 'Yes',
additionalAttr: 'disabled'
},
{
value: 'no',
label: 'No',
},
{
value: 'not sure',
label: 'I am not sure',
}
]
},
message: {
value: null,
type: 'textarea',
label: 'Message',
placeholder: 'type your message',
position: 'right',
block: 'secondRow',
order: 2,
},
hobby: {
value: ['book', 'movie'],
type: 'checkbox',
label: 'Hobbies',
position: 'left',
block: 'secondRow',
order: 3,
option: [{
value: 'travel',
label: 'Traveling'
},
{
value: 'book',
label: 'Reading'
},
{
value: 'movie',
label: 'Watching movie'
}
]
},
privacy: {
value: null,
type: 'checkbox',
label: 'Privacy',
position: 'right',
block: 'secondRow',
order: 3,
option: [{
value: 'agree',
label: 'I agree'
}
]
}
}
My working code:
$.ajax({
url: "https://api.myjson.com/bins/151f9r",
method: "GET"
})
.done(function(response) {
var data = response.fieldset;
console.log('.......................');
console.log(data);
})
.fail(function(response) {
console.log(response);
});
var formObj = {
username: {
value: null,
type: 'text',
label: 'Username',
placeholder: 'Enter username',
position: 'left',
block: 'firstRow',
order: 1,
additionalClass: 'user'
},
password: {
value: null,
type: 'password',
label: 'Password',
placeholder: 'enter password',
position: 'left',
block: 'firstRow',
order: 2
},
country: {
value: '3',
type: 'select',
label: 'Where are you form?',
//defaultText: 'Choose here',
position: 'right',
block: 'firstRow',
order: 2,
option: [{
value: '1',
label: 'Australia'
},
{
value: '2',
label: 'USA'
},
{
value: '3',
label: 'UK'
}
]
},
gender: {
value: 'female',
type: 'select',
label: 'Gender',
defaultText: null,
position: 'right',
block: 'firstRow',
order: 1,
option: [{
value: 'male',
label: 'Male'
},
{
value: 'female',
label: 'Female'
},
{
value: 'other',
label: 'Other',
additionalAttr: 'disabled'
}
]
},
decision: {
value: 'not sure',
type: 'radio',
label: 'Have you enjoyed it?',
position: 'left',
block: 'secondRow',
order: 1,
option: [{
value: 'yes',
label: 'Yes',
additionalAttr: 'disabled'
},
{
value: 'no',
label: 'No',
},
{
value: 'not sure',
label: 'I am not sure',
}
]
},
message: {
value: null,
type: 'textarea',
label: 'Message',
placeholder: 'type your message',
position: 'right',
block: 'secondRow',
order: 2,
},
vehicle: {
value: 'car',
type: 'checkbox',
label: 'Preferred vehicles',
position: 'left',
block: 'secondRow',
order: 2,
option: [{
value: 'car',
label: 'I like car'
},
{
value: 'bike',
label: 'I prefer bike'
},
{
value: 'boat',
label: 'Boat is my favorit'
}
]
},
hobby: {
value: ['book', 'movie'],
type: 'checkbox',
label: 'Hobbies',
position: 'left',
block: 'secondRow',
order: 3,
option: [{
value: 'travel',
label: 'Traveling'
},
{
value: 'book',
label: 'Reading'
},
{
value: 'movie',
label: 'Watching movie'
}
]
},
privacy: {
value: null,
type: 'checkbox',
label: 'Privacy',
position: 'right',
block: 'secondRow',
order: 3,
option: [{
value: 'agree',
label: 'I agree'
}
]
},
email: {
value: null,
type: 'text',
label: 'Email',
placeholder: 'Enter email',
position: 'right',
block: 'secondRow',
order: 1,
additionalAttr: 'disabled',
additionalClass: 'emailbox custom'
}
}
console.log(formObj);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>Upvotes: 4
Views: 147
Answers (2)
Eddie
Reputation: 26844
You can use reduce to loop thru the data array.Check if the name exist as the key on formObj using hasOwnProperty. If it exist use spread syntax to shallow copy the object and overide the value property.
var data = [{"name":"username","value":null},{"name":"password","value":null},{"name":"gender","value":"other"},{"name":"country","value":"3"},{"name":"decision","value":"not sure"},{"name":"hobby","value":[]},{"name":"privacy","value":null},{"name":"message","value":null}]
var formObj = {"username":{"value":null,"type":"text","label":"Username","placeholder":"Enter username","position":"left"},"password":{"value":null,"type":"password","label":"Password","placeholder":"enter password","position":"left"},"gender":{"value":"female","type":"select","label":"Gender","defaultText":null,"position":"right"},"country":{"value":"3","type":"select","label":"Where are you form?","position":"right","block":"firstRow"},"decision":{"value":"not sure","type":"radio","label":"Have you enjoyed it?","position":"left","block":"secondRow"},"email":{"value":null,"type":"text","label":"Email","placeholder":"Enter email","position":"right"},"hobby":{"value":[null,null],"type":"checkbox","label":"Hobbies","position":"left","block":"secondRow"},"privacy":{"value":"","type":"checkbox","label":"Privacy","position":"right","block":"secondRow"},"message":{"value":"","type":"textarea","label":"Message","placeholder":"type your message","position":"right"},"vehicle":{"value":"car","type":"checkbox","label":"Preferred vehicles","position":"left","block":"secondRow"}}
var newObj = data.reduce((c, v) => {
if (formObj.hasOwnProperty(v.name)) c[v.name] = {...formObj[v.name],value: v.value};
return c;
}, {});
console.log(newObj);Upvotes: 3
Dacre Denny
Reputation: 30360
A simple approach would be to break this task into three steps:
- Extract the key/value entries of
formObjinto an array via theObject.entries()method - Filter the extracted key/value pairs from
formObjto remove entries that don't have matchingnameindataarray - Construct
newObjvia thereduce()method, to reduce the array of filtered key/value entries into a single object
This can be implemented by the following:
var data = [{"name":"username","value":null},{"name":"password","value":null},{"name":"gender","value":"other"},{"name":"country","value":"3"},{"name":"decision","value":"not sure"},{"name":"hobby","value":[]},{"name":"privacy","value":null},{"name":"message","value":null}]
var formObj = {"username":{"value":null,"type":"text","label":"Username","placeholder":"Enter username","position":"left"},"password":{"value":null,"type":"password","label":"Password","placeholder":"enter password","position":"left"},"gender":{"value":"female","type":"select","label":"Gender","defaultText":null,"position":"right"},"country":{"value":"3","type":"select","label":"Where are you form?","position":"right","block":"firstRow"},"decision":{"value":"not sure","type":"radio","label":"Have you enjoyed it?","position":"left","block":"secondRow"},"email":{"value":null,"type":"text","label":"Email","placeholder":"Enter email","position":"right"},"hobby":{"value":[null,null],"type":"checkbox","label":"Hobbies","position":"left","block":"secondRow"},"privacy":{"value":"","type":"checkbox","label":"Privacy","position":"right","block":"secondRow"},"message":{"value":"","type":"textarea","label":"Message","placeholder":"type your message","position":"right"},"vehicle":{"value":"car","type":"checkbox","label":"Preferred vehicles","position":"left","block":"secondRow"}}
/* Extract key value entries from input object */
const keyValues = Object.entries(formObj)
/* Filter input object entries by existence of
name matching key from data array */
const filteredKeyValues = keyValues.filter(([key, value]) => {
return data.findIndex(({ name }) => name === key) !== -1;
});
/* Construct newObj object from filtered key value entries */
const newObj = filteredKeyValues.reduce((result, [key, value]) => {
return { [key] : value, ...result };
}, {});
console.log(newObj)Upvotes: 0
Related Questions
- Check if one array is contained in another array
- Jquery - Check if objects in array exist
- how to check if array contains an another array in javascript
- How to check a value present in other array and vise versa
- check if some values of an array exist in the key of another object with jQuery
- Find whether Value in Object exists within an array
- How to know whether the object contains in my Array List of jquery?
- How to check if jQuery object exist in array?
- check element of one array in another array
- How to find whether object exist in array or not javascript