如何检查特定对象键并更新(如果存在)

时间:2018-04-02 15:33:10

标签: javascript jquery

我有写入模型的文本输入。我希望这些对象写入模型并更新密钥是否存在。

例如:如果我提交,

Id: "1", Value: "Foo"

我用新值更新它:

Id: "1", Value: "Bar"

我的数组应该是:

 0 { Id: "1", Value: "Bar"}

 0 { Id: "1", Value: "Foo"}
 1 { Id: "1", Value: "Bar"}

此处示例:JSFiddle

 <div id="wrapper">
      <div>
        <input id="1" type="text" value="input_1">
        <button>Button 1</button>
      </div>
      <br>
      <div>
        <input id="2" type="text" value="input_2">
        <button>Button 2</button>
      </div>
      <br>
      <div>
        <input id="3" type="text" value="input_3">
        <button>Button 3</button>
      </div>
      <br>
    </div>

jQuery - 将添加到数组但不确定如果密钥存在则如何更新。看了其他的例子,但仍然没有得到它

   var obj = {
        pairs: []
   }


    $("button").on("click", function() {
      var keyValuePairs = {
          id: "",
          value: ""
      }

      var input_id = $(this).prev().prop('id');
      var dynamic_value = $(this).prev().prop('value');

      if(obj.pairs.length > 0){
        $.each(obj.pairs, function(i, pair) {
          if($(this).id !== input_id){
            obj.pairs.push(keyValuePairs);
            return false;
          } else {
            obj.pairs.splice(i, 1);
            obj.pairs.push(keyValuePairs);
          }
        });
      } else {
          obj.pairs.push(keyValuePairs);
      }

      keyValuePairs.id = input_id;
      keyValuePairs.value = dynamic_value;
      console.log(obj);

   });

5 个答案:

答案 0 :(得分:2)

我终于改变了很多......
我用一个标志来知道更新是否完成......

所以我先运行.each()循环。如果没有密钥/对,它就不会运行。然后进行比较,如果尚未进行更改,则推送新值。

&#13;
&#13;
var obj = {
  pairs: []
}


$("button").on("click", function() {
  var keyValuePairs = {
    id: "",
    value: ""
  }
  var change_done=false;

  var input_id = $(this).prev().prop('id');
  var dynamic_value = $(this).prev().prop('value');

  $.each(obj.pairs, function(i, pair) {
    if(obj.pairs[i].id == input_id){             // Change is here.
      obj.pairs[i].id=input_id;
      obj.pairs[i].value=dynamic_value;
      change_done=true;
      return false;
    }
  });

  if(!change_done || obj.pairs.length == 0){
    obj.pairs.push(keyValuePairs);
  }


  keyValuePairs.id = input_id;
  keyValuePairs.value = dynamic_value;
  console.log(obj);

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
  <div>
    <input id="1 "type="text" value="input_1">
    <button>Button 1</button>
  </div>
  <br>
  <div>
    <input id="2" type="text" value="input_2">
    <button>Button 2</button>
  </div>
  <br>
  <div>
    <input id="3" type="text" value="input_3">
    <button>Button 3</button>
  </div>
  <br>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

试试这个https://jsfiddle.net/y6rgm7z8/93/

$(document).ready(function() {
  var obj = {
    pairs: []
  }

  $("button").on("click", function() {
    var keyValuePairs = {
      id: "",
      value: ""
    }

    var input_id = $(this).prev().prop('id');
    var dynamic_value = $(this).prev().prop('value');

    var pair = obj.pairs.find(item => item.id === input_id)
    if(pair){
      pair.value = dynamic_value;
    } else {
      keyValuePairs.id = input_id;
      keyValuePairs.value = dynamic_value;
      obj.pairs.push(keyValuePairs);
    }

    console.log(obj);

  });


});

find()方法对数组中存在的每个元素执行一次函数:

  1. 如果找到函数返回true值的数组元素,则find()返回该数组元素的值(并且不检查其余值)
  2. 否则返回undefined
  3. find()的性能优于每个()。

    我们不需要使用push()进行splice()更新,因为在find()之后我们有了对象的链接,所以我们可以更改值。

    如果find()返回undefined,我们会将新对象推送到数组

答案 2 :(得分:2)

看看这是否有帮助

$(document).ready(function() {
	var obj = {
  	pairs: []
  }
  
	$("button").on("click", function() {
  	var found = false;
  	var input_id = $(this).prev().prop('id');
    var dynamic_value = $(this).prev().prop('value');

    var keyValuePairs = {
        id: input_id,
        value: dynamic_value
    }
    
      if(obj.pairs.length > 0){
        $.each(obj.pairs, function(i, pair) {
	    if(pair[Object.keys(pair)[0]] === input_id){
          	obj.pairs[i] = keyValuePairs;
            found = true;
            return false;
          }
        });
        if(!found)
      		obj.pairs.push(keyValuePairs);
      } else {
          obj.pairs.push(keyValuePairs);
      }
      
      console.log(obj);
    
  });
  

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div>
    <input id="1"type="text" value="input_1">
    <button>Button 1</button>
  </div>
  <br>
  <div>
    <input id="2" type="text" value="input_2">
    <button>Button 2</button>
  </div>
  <br>
  <div>
    <input id="3" type="text" value="input_3">
    <button>Button 3</button>
  </div>
  <br>
</div>

答案 3 :(得分:1)

我已经改写了一下。如果ID存在,则其值将更新,并且不会插入新行:

$(document).ready(function() {
    var obj = {
      pairs: []
    }

    $("button").on("click", function() {
    var input_id = $(this).prev().prop('id');
    var dynamic_value = $(this).prev().prop('value');
    var isUpdated = false;
    var keyValuePairs = {
        id: input_id,
        value: dynamic_value
    };

    if (obj.pairs.length == 0) {
        obj.pairs.push(keyValuePairs);
        return false;
    }

    $.each(obj.pairs, function(i, pair) {
        if (obj.pairs[i].id === input_id) {
            obj.pairs[i].value = dynamic_value;
            isUpdated = true;
            return false;
        }
    });

    if (!isUpdated) {
        obj.pairs.push(keyValuePairs);
    }

    console.log(obj);
  });
});

经过测试,确实有效。

答案 4 :(得分:1)

你可以这样做:

const pair = obj.pairs.find(pair => pair.id === input_id);

if (pair) {
  obj.pairs[input_id] = {...keyValuePairs}
} else {
  obj.pairs.push(keyValuePairs)
}