如何用 jQuery 检查一组对象是否存在于另一个数组对象中

Question

我的数组，存储在名为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"
     }
  }
]

我的对象存储在名为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'
  }
}

因此，在数据（数组）中有8个对象和在formObj（对象）中有10个对象。我的目标是将data中的name与formObj匹配，并仅创建匹配对象的新对象。新对象的所有value都应来自数据（数组）。简而言之，像/从formObj创建一个newObj。newObj不包含不在数据（数组）中的对象。我已经试图在这里写出概念，但不知道如何继续：

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
   }
}

因此，newObj 将是：

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'
      }
    ]
  }
}

我的工作代码：

$.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>

- user1896653

Answer 1

你可以使用 `reduce` 循环遍历 `data` 数组。使用 `hasOwnProperty` 检查名称是否存在于 `formObj` 的键中。如果存在，则使用扩展语法进行浅层复制该对象并覆盖 `value` 属性。

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);

- Eddie

---

感谢您的解决方案。实际上，option[] 应该在 gender、country、decision、hobby 和 privacy 中，在 newObj 中像 formObj 一样。这就是为什么我要求从 formObj 创建 newObj。 - user1896653

你在原帖中的 formObj 没有这些属性。如果你的 formObj 有这些属性，那么它将被浅复制到新的 newObj 中。 - Eddie

我尝试了使用更新后的“data”和“formObj”的解决方案，看起来它正在工作。 - Eddie

c 是累加器的值。v 是当前数组值/元素。 - Eddie

你可以查看文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce - Eddie

Answer 2

一个简单的方法是将此任务分为三个步骤：

1. 通过 Object.entries() 方法将 formObj 的键/值条目提取到数组中
2. 从 formObj 中过滤提取的键/值对，以删除在 data 数组中没有匹配的 name 条目
3. 通过 reduce() 方法构造 newObj，将过滤后的键/值条目数组减少为单个对象

可以通过以下方式实现：

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)

- Dacre Denny

---

感谢您的解决方案。实际上，option[] 应该在 gender、country、decision、hobby、privacy 中的 newObj 中，就像 formObj 一样。 - user1896653

我在代码片段中写了完整的格式。但是为了保持帖子大小，我没有在帖子文本中全部显示。对于造成的困惑，我很抱歉。 - user1896653

如果object数组在formObj的任何值中，则它们应该通过上面的答案复制到newObj中。这有帮助吗？不客气。 - Dacre Denny