Хотите обновить объект, используя индекс в jquery

Question

Это мой код

Я обновил весь код здесь для дополнительной информации. Я обработал входы Dynami c

      <style type="text/css">

          #navPrev, #navNext {
            color: #333;
            font-size: 1em;
          }

          #navPrev:hover, #navNext:hover {
            color: #1abb9c;
          }

          #navPrev[disabled], #navNext[disabled] {
            color: #cdcdcd;
            cursor: default;
          }

          .createborder {
            border: 2px solid #ccc;
          border-radius: 5px;
          padding-top: 16px;
          }
          .removeborder {
            border: 0px solid;
          border-radius: 5px;
          padding-top: 16px;
          }
      </style>
      <div id="modal" class="modal fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 id="modalTitle" class="modal-title"></h4>
        </div>
        <div class="modal-body">
          <div class="row">

            <div class="col-xs-12">

               <div class="row">
               <div id="fieldallow"></div>
               </div>
            </div>

          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" id="navPrev" onclick="prevImg()">Prev</button>
          <button type="button" class="btn btn-default" id="navNext" onclick="nextImg()">Next</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <div id="page-wrapper" class="border-cnttp">
    <div class="right-panel">
    <div class="alert alert-success alert-dismissible fade in errorshow" role="alert" style="display: none;">
      <button type="button" class="close close_alert" aria-label="Close"><span aria-hidden="true">×</span></button>
      <span class="error_message"></span>
    </div>
      <div class="content-main fade-in-cnt">

      <div class="panel panel-default AllMenuList">
          <div class="panel-heading f-panel-head"><i class="fa fa-file-image-o" aria-hidden="true"></i><?php echo ADDCLIENTXML; ?>

          </div>
          <div class="panel-body">
             <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="form-group frm-grpmrgn">
                <div class="row">
                 <form role="form" id="Menu_details" name="Menu_details" method="post" class="row">
                    <div class="form-group frm-padbtm col-sm-12 col-md-4 col-lg-4">
                        <label for="desc"><span class="fheadcolor">Client </span><span style="color:red;"> * </span></label>
                        <select name="mclient" id="mclient" class="selectpicker show-tick form-control bs-select-hidden project adminselect" data-live-search="true" onchange="changeclient(this.value);"><?php echo $clientlist; ?></select>
                        <p class="form-error mclient"></p>
                    </div>
                    <div class="form-group frm-padbtm col-sm-12 col-md-4 col-lg-4">
                        <label for="desc"><span class="fheadcolor">Template </span><span style="color:red;"> * </span></label>
                        <input type="text" placeholder="" id="mtemplate" name="mtemplate" class="form-control" value="" readonly="true">
                        <p class="form-error mtemplate"></p>
                    </div>
                    <div class="form-group frm-padbtm col-sm-12 col-md-4 col-lg-4">
                      <label for="name"><span class="fheadcolor">No.of Tabs </span><span style="color:red;"> * </span></label>
                      <input type="text" placeholder="" id="mtabs" name="mtabs" class="form-control" value="3" readonly="true">
                      <p class="form-error mtabs"></p>
                    </div>
                 </form>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab1">PO Metadata</a></li>
    <li><a data-toggle="tab" href="#tab2">Order Values</a></li>
    <li><a data-toggle="tab" href="#tab3">PO Summary</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">
      <h4>PO Metadata</h4>
      <div class="form-group frm-padbtm col-sm-12 col-md-4 col-lg-4">
        <label for="name"><span class="fheadcolor">Enter Inputs</span><span style="color:red;"> * </span></label>
        <input type="text" placeholder="" id="selectinput1" name="selectinput1" class="form-control" value="" min="1"><br>
        <button type="button" id="selectinputbtn1" class="btn btn-info" value="submit">Create Input</button>
        <p class="form-error mtabs"></p>
      </div>
      <div class="form-group frm-padbtm col-sm-12 col-md-8 col-lg-8" id="generateinputs"></div>
    </div>
    <div id="tab2" class="tab-pane fade">
      <h4>Order Values</h4>
    </div>
    <div id="tab3" class="tab-pane fade">
      <h4>PO Summary</h4>
    </div>
  </div>
                </div>
              </div>
            </div>

          </div>

        </div>


    </div>
  </div>
  <script type="text/javascript">
     var data;
 var inputobjarr = {};
     $("#template_add").on("click",function(){
      location.href = "index.php?rt=xmlconfig/addxmltemp/0";
    });

     function changeclient(val)
     {

        var clientid = val;

        $.ajax({ 
          url: "?rt=xmlconfig/gettemplates",
          type: 'post',
          dataType: "json",
          data:{clientid:clientid}, 
          success: function(response)
          {
              var counttemplate = parseInt(response) + 1;
              $("#mtemplate").val(counttemplate);
          }
        });

     }
     $('#selectinput1').bind('keyup paste', function(){
        this.value = $(this).val();
        this.value = this.value.replace(/[^0-9]/g, '');
     });
     $('#selectinputbtn1').on('click', function(){
        $("#generateinputs").addClass('createborder');
        var columnObjArr = [];

        this.value = $("#selectinput1").val();

        if(this.value!='')
        {


          $('#generateinputs').html("");
          var num = $("#selectinput1").val(),
              cur = $('div.rmv input:text'),
              curL = cur.length;
          if (!curL) {
              for (var i = 1; i <= num; i++) {
                attributesetup(inputobjarr);
                columnObjArr.push({id:i,inputobjarr});
                  $(makeRow(i)).appendTo($('#generateinputs'));
              }
          }
          else if (num < curL) {
              var filled = cur.filter(

              function() {
                  return $("#selectinput1").val().length
              }),
                  empties = curL - filled.length,
                  dA = curL - num;

              if (empties >= num) {
                  cur.filter(

                  function() {
                      return !$("#selectinput1").val().length
                  }).parent().slice(-num).remove();
              }
              else if (empties < num) {
                  var remainder = num - empties;

                  cur.filter(

                  function() {
                      return !$("#selectinput1").val().length
                  }).parent().slice(-num).remove();
                  $('div.rmv').slice(-remainder).remove();
              }
          }
          else {
              var diff = num - curL;

              for (var i = 0; i < diff; i++) {
                  $(makeRow(i)).appendTo($('#generateinputs'));
              }
          }

        }
        else{
          $('#generateinputs').html("");
        }

        data = columnObjArr;
        console.log(data.toSource())

  });

     function attributesetup(inputobjarr)
     {

         inputobjarr[attr('<?php echo ACCORDIANID; ?>')] = attr('<?php echo ACCORDIANID; ?>')+'||'+attrvalue("<?php echo ACCORDIANID; ?>");
         inputobjarr[attr('<?php echo PARENTDIVCLASS; ?>')] = attr('<?php echo PARENTDIVCLASS; ?>')+'||'+attrvalue("<?php echo PARENTDIVCLASS; ?>");
         inputobjarr[attr('<?php echo DIV_TYPE; ?>')] = attr('<?php echo DIV_TYPE; ?>')+'||'+attrvalue("<?php echo DIV_TYPE; ?>");
         inputobjarr[attr('<?php echo LABELNAME_CLASS; ?>')] = attr('<?php echo LABELNAME_CLASS; ?>')+'||'+attrvalue("<?php echo LABELNAME_CLASS; ?>");
         inputobjarr[attr('<?php echo LABELNAME; ?>')] = attr('<?php echo LABELNAME; ?>')+'||'+attrvalue("<?php echo LABELNAME; ?>");
         inputobjarr[attr('<?php echo TABLEROWHIDEFLAG; ?>')] = attr('<?php echo TABLEROWHIDEFLAG; ?>')+'||'+attrvalue("<?php echo TABLEROWHIDEFLAG; ?>");
         inputobjarr[attr('<?php echo TABLEROWHIDEID; ?>')] = attr('<?php echo TABLEROWHIDEID; ?>')+'||'+attrvalue("<?php echo TABLEROWHIDEID; ?>");
         inputobjarr[attr('<?php echo MANITORY; ?>')] = attr('<?php echo MANITORY; ?>')+'||'+attrvalue("<?php echo MANITORY; ?>");
         inputobjarr[attr('<?php echo MULTIPLEINPUT; ?>')] = attr('<?php echo MULTIPLEINPUT; ?>')+'||'+attrvalue("<?php echo MULTIPLEINPUT; ?>");
         inputobjarr[attr('<?php echo DIV_STATUS; ?>')] = attr('<?php echo DIV_STATUS; ?>')+'||'+attrvalue("<?php echo DIV_STATUS; ?>");
         inputobjarr[attr('<?php echo DBACCESS; ?>')] = attr('<?php echo DBACCESS; ?>')+'||'+attrvalue("<?php echo DBACCESS; ?>");
         inputobjarr[attr('<?php echo INPUTS_TYPE; ?>')] = attr('<?php echo INPUTS_TYPE; ?>')+'||'+attrvalue("<?php echo INPUTS_TYPE; ?>");
         inputobjarr[attr('<?php echo INPUT_CONTROLNAME; ?>')] = attr('<?php echo INPUT_CONTROLNAME; ?>')+'||'+attrvalue("<?php echo INPUT_CONTROLNAME; ?>");
         inputobjarr[attr('<?php echo INPUT_CLASS; ?>')] = attr('<?php echo INPUT_CLASS; ?>')+'||'+attrvalue("<?php echo INPUT_CLASS; ?>");
         inputobjarr[attr('<?php echo FIELD_CLASS; ?>')] = attr('<?php echo FIELD_CLASS; ?>')+'||'+attrvalue("<?php echo FIELD_CLASS; ?>");
         inputobjarr[attr('<?php echo POSTID; ?>')] = attr('<?php echo POSTID; ?>')+'||'+attrvalue("<?php echo POSTID; ?>");
         inputobjarr[attr('<?php echo POSTNAME; ?>')] = attr('<?php echo POSTNAME; ?>')+'||'+attrvalue("<?php echo POSTNAME; ?>");
         inputobjarr[attr('<?php echo INPUT_MANITORY; ?>')] = attr('<?php echo INPUT_MANITORY; ?>')+'||'+attrvalue("<?php echo INPUT_MANITORY; ?>");
         inputobjarr[attr('<?php echo READONLY; ?>')] = attr('<?php echo READONLY; ?>')+'||'+attrvalue("<?php echo READONLY; ?>");
         inputobjarr[attr('<?php echo MULTISELECT; ?>')] = attr('<?php echo MULTISELECT; ?>')+'||'+attrvalue("<?php echo MULTISELECT; ?>");
         inputobjarr[attr('<?php echo CHARVALIDATE; ?>')] = attr('<?php echo CHARVALIDATE; ?>')+'||'+attrvalue("<?php echo CHARVALIDATE; ?>");
         inputobjarr[attr('<?php echo NUMERICVALIDATE; ?>')] = attr('<?php echo NUMERICVALIDATE; ?>')+'||'+attrvalue("<?php echo NUMERICVALIDATE; ?>");
         inputobjarr[attr('<?php echo BODYONLOAD; ?>')] = attr('<?php echo BODYONLOAD; ?>')+'||'+attrvalue("<?php echo BODYONLOAD; ?>");
         inputobjarr[attr('<?php echo JSONARRAYNAME; ?>')] = attr('<?php echo JSONARRAYNAME; ?>')+'||'+attrvalue("<?php echo JSONARRAYNAME; ?>");
         inputobjarr[attr('<?php echo DEFAULTFLAG; ?>')] = attr('<?php echo DEFAULTFLAG; ?>')+'||'+attrvalue("<?php echo DEFAULTFLAG; ?>");
         inputobjarr[attr('<?php echo DEFAULTVALUE; ?>')] = attr('<?php echo DEFAULTVALUE; ?>')+'||'+attrvalue("<?php echo DEFAULTVALUE; ?>");
         inputobjarr[attr('<?php echo OPTIONVALUE; ?>')] = attr('<?php echo OPTIONVALUE; ?>')+'||'+attrvalue("<?php echo OPTIONVALUE; ?>");
         inputobjarr[attr('<?php echo DBTABLERUNID; ?>')] = attr('<?php echo DBTABLERUNID; ?>')+'||'+attrvalue("<?php echo DBTABLERUNID; ?>");
         inputobjarr[attr('<?php echo DBTABLENAME; ?>')] = attr('<?php echo DBTABLENAME; ?>')+'||'+attrvalue("<?php echo DBTABLENAME; ?>");
         inputobjarr[attr('<?php echo DBCOLUMNNAME; ?>')] = attr('<?php echo DBCOLUMNNAME; ?>')+'||'+attrvalue("<?php echo DBCOLUMNNAME; ?>");
         inputobjarr[attr('<?php echo CHARALLOWFLAG; ?>')] = attr('<?php echo CHARALLOWFLAG; ?>')+'||'+attrvalue("<?php echo CHARALLOWFLAG; ?>");
         inputobjarr[attr('<?php echo CHARALLOWLEN; ?>')] = attr('<?php echo CHARALLOWLEN; ?>')+'||'+attrvalue("<?php echo CHARALLOWLEN; ?>");
         inputobjarr[attr('<?php echo PLACEHOLDER; ?>')] = attr('<?php echo PLACEHOLDER; ?>')+'||'+attrvalue("<?php echo PLACEHOLDER; ?>");

     }

     function attr(valattr)
     {
       var values = valattr.split('||');

       return values[0];
     }
     function attrvalue(attrval)
     {
       var values = attrval.split('||');

       return values[1];
     }
     function makeRow(cnt) {
       var div = document.createElement('div'),
        button = document.createElement('button'),
        a = document.createElement('a'),
        btntxt = document.createTextNode('input'+cnt),
        t = document.createElement('i');
    div.className = 'form-group frm-padbtm col-sm-12 col-md-2 col-lg-2 rmv';
    button.type = 'button';
    button.className = "btn btn-primary";
    button.value = 'input';
    button.setAttribute('onclick', "openModal("+parseInt(cnt)+")");
    button.appendChild(btntxt);
    t.className = 'fa fa-close';
    t.setAttribute('style','color:red;')
    a.href = 'javascript:;';
    a.className = 'remScnt';
    a.appendChild(t);
    div.appendChild(button);
    div.insertBefore(a, button.nextSibling);

    return div;
}




$('body').on('click', '.rmv a.remScnt', function() {
    var updateselectinput = $("#selectinput1").val();
    $(this).parent().remove();
    var updtval = parseInt(updateselectinput) - 1;
    $("#selectinput1").val(updtval);
});

$("body").on('keyup','.getupdateinputs',function(e)
{ 
    var inputid = $(this).attr('data-knownid');
    var nametochange = $(this).attr('id');
    var changevalue = this.value;

    var matchid = parseInt(inputid) - 1;
   var index = data.findIndex(function(data) {
          return data.id == inputid
        });

    if(index == matchid)
    {
     $(data).eq(index)[0].inputobjarr[nametochange] = nametochange+'||'+changevalue; 

    }



})

var currentItem = 1;

function prevImg() {

  if (currentItem > 1) {
    currentItem--;
  }
  loadData();
}

function nextImg() {

console.log(data)

  if (currentItem < data.length) {
    currentItem++;
  }
  loadData();

}

function loadData() {
  var buildfields = '';

  $("#modalTitle").html('Input '+currentItem);

  var jsonfrmt = data[currentItem - 1];

jsonfrmt = jsonfrmt.inputobjarr;

  Object.keys(jsonfrmt).map(function(e) {
    var fieldseperate = jsonfrmt[e].split('||');

    buildfields+='<div class="form-group frm-padbtm col-sm-12 col-md-4 col-lg-4"><label for="name"><span class="fheadcolor">'+fieldseperate[0]+'</span><span style="color:red;"> * </span></label><input type="text" placeholder="" id="'+fieldseperate[0]+'" name="'+fieldseperate[0]+'" class="form-control getupdateinputs getinputdata'+currentItem+'" data-knownid="'+currentItem+'" value="'+fieldseperate[1]+'"><p class="form-error mtabs"></p></div>';
  })

  $("#fieldallow").html(buildfields);

  $("#navPrev").removeAttr("disabled");
  $("#navNext").removeAttr("disabled");

  if (currentItem == 1) {
    $("#navPrev").attr("disabled", "disabled");
  }
  else if (currentItem == data.length) {
    $("#navNext").attr("disabled", "disabled");
  }
}

function openModal(idx) {

  currentItem = idx;
  loadData();
  $("#modal").modal();
}
  </script>

Я пытался, но он обновит все объекты Как я могу это исправить? Есть ли другой способ решить? Я пытался таким же образом data [index] .inputobjarr [nametochange] = "некоторое обновление";

Это повлияет на весь объект

Заранее спасибо.

Answer 1

Вы пытаетесь сначала получить индекс объекта, а затем пытаетесь обновить его, но ваша логика c неверна и, следовательно, вы не получаете точный объект для обновления.

Попробуйте приведенный ниже код, в котором вы можете выполнить итерацию data объект, чтобы получить объект с соответствующим идентификатором и обновить его внутри l oop вместо того, чтобы сначала получить индекс, а затем обновить.

$(function(){
  var data = [{id:1, inputobjarr:{accordionid:"accordionid||1", parentdivclass:"parentdivclass||col-md-12 form-inline cust-align", type:"type||text", 'lablename-class':"lablename-class||col-md-2 heading form-group", lablename:"lablename||", tablerowhideflag:"tablerowhideflag||0", placeholder:"placeholder||"}},{id:2, inputobjarr:{accordionid:"accordionid||1", parentdivclass:"parentdivclass||col-md-12 form-inline cust-align", type:"type||text", 'lablename-class':"lablename-class||col-md-2 heading form-group", lablename:"lablename||", tablerowhideflag:"tablerowhideflag||0", placeholder:"placeholder||"}},{id:3, inputobjarr:{accordionid:"accordionid||1", parentdivclass:"parentdivclass||col-md-12 form-inline cust-align", type:"type||text", 'lablename-class':"lablename-class||col-md-2 heading form-group", lablename:"lablename||", tablerowhideflag:"tablerowhideflag||0", placeholder:"placeholder||"}}];
  $("body").on('keyup','.getupdateinputs',function(e) { 
    var inputid = $(this).data('knownid');
    var nametochange = $(this).attr('id');
    var changevalue = $(this).val();

    $.each(data, function(key, value){
       var id = value.id;
       if(id == inputid) {
          var obj = value.inputobjarr;
          obj[nametochange] = nametochange+'||'+changevalue;
       }
    });
    console.log(data);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="getupdateinputs" id="1" data-knownid="1"><br/>
<input class="getupdateinputs" id="2" data-knownid="2"><br/>
<input class="getupdateinputs" id="3" data-knownid="3"><br/>