Question

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

例如：如果我提交，

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

   });

Answer 1

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

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

＆＃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;

Answer 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（）方法对数组中存在的每个元素执行一次函数：

如果找到函数返回true值的数组元素，则find（）返回该数组元素的值（并且不检查其余值）
否则返回undefined

find（）的性能优于每个（）。

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

如果find（）返回undefined，我们会将新对象推送到数组

Answer 3

看看这是否有帮助

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

Answer 4

我已经改写了一下。如果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);
  });
});

经过测试，确实有效。

Answer 5

你可以这样做：

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

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

如何检查特定对象键并更新（如果存在）

5 个答案: