代码之家 › 专栏 › 技术社区 › Geoff_S

从较低的对象/数组级别获取其他值

json jquery javascript

Geoff_S · 技术社区 · 6 年前

我在下面有一个工作片段,如果您在第一个输入中输入Cat,下拉列表将正确填充,如果您单击其中一个下拉列表,它将用“Name”值填充第一个框,这是正确的。但是我怎样才能得到较低级别的属性来填充其他的输入呢?

基本上,我希望能够在下面这个对象的输入中分配多个数组值。

属性与源中的“name”处于同一级别,它只是一个新数组

$('#productInput').on('input', function() {
  let _this = $(this);
  let foundOption;
  let optSelector = `option[value='${_this.val()}']`;
  if (_this.val() === '') {
    return;
  } else if ($('#returnedProducts').find(optSelector).length) {
   //this one works 
   $("#groupName").val(_this.val());
   
   //I want to fill these with _source.attributes.groupColor and groupCategory
   $("#groupColor").val();
   $("#groupCategory").val();

  } else {

    const searchResult = $(this).val();
    $("#returnedProducts").empty();
    var result = [{
      _source: {
        "name": "cat",
        attributes:{
           "groupColor": "blue",
           "groupCategory": "Misc",
        },
      },
 
    }, {
      _source: {
        "name": "cat1",
        attributes:{
           "groupColor": "blue",
           "groupCategory": "Misc",
        },
      },

    }, {
      _source: {
        "name": "cat2",
        attributes:{
           "groupColor": "blue",
           "groupCategory": "Misc",
        },
      },

    }, {
      _source: {
        "name": "cat33",
         attributes:{
           "groupColor": "blue",
           "groupCategory": "Misc",
        },
      },

    }];
    for (let i = 0; i < result.length; i++) {
      $("#returnedProducts").append("<option srindex=" + [i] + " value=" + result[i]._source.name + ">" + result[i]._source.name + "</option>");

    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="productInput" list="returnedProducts">
<datalist id="returnedProducts"></datalist>
<input id="groupName">
<input id="groupColor">
<input id="groupCategory">

2 回复 | 直到 6 年前

gaetanoM 6 年前

$("#returnedProducts").append("<option srindex=" + [i] + " value=" + result[i]._source.name + ">" + result[i]._source.name + "</option>");

使用jQuery方式并添加数据属性:

$("#returnedProducts").append($("<option/>",
     {
         "srindex": i,
         "data-attributes": JSON.stringify(result[i]._source.attributes),
         "value": result[i]._source.name,
         "html": result[i]._source.name,
     }
 ));

通过这种方式,您可以获得您的属性:

var attributes = $('#returnedProducts').find(optSelector).data('attributes');

$("#groupColor").val(attributes.groupColor);
$("#groupCategory").val(attributes.groupCategory);

例如:

$('#productInput').on('input', function () {
    let _this = $(this);
    let foundOption;
    let optSelector = `option[value = '${_this.val()}']`;
    if (_this.val() === '') {
        return;
    } else if ($('#returnedProducts').find(optSelector).length) {
        //this one works
        $("#groupName").val(_this.val());
        //I want to fill these with _source.attributes.groupColor and groupCategory
        var attributes = $('#returnedProducts').find(optSelector).data('attributes');
        $("#groupColor").val(attributes.groupColor);
        $("#groupCategory").val(attributes.groupCategory);

    } else {
        const searchResult = $(this).val();
        $("#returnedProducts").empty();
        var result = [{
            _source: {
                "name": "cat",
                attributes: {
                    "groupColor": "blue1",
                    "groupCategory": "Misc1",
                },
            },

        }, {
            _source: {
                "name": "cat1",
                attributes: {
                    "groupColor": "blue2",
                    "groupCategory": "Misc2",
                },
            },

        }, {
            _source: {
                "name": "cat2",
                attributes: {
                    "groupColor": "blue3",
                    "groupCategory": "Misc3",
                },
            },

        }, {
            _source: {
                "name": "cat33",
                attributes: {
                    "groupColor": "blue4",
                    "groupCategory": "Misc4",
                },
            }
        }];
        for (let i = 0; i < result.length; i++) {
            $("#returnedProducts").append($("<option/>",
                    {
                        "srindex": i,
                        "data-attributes": JSON.stringify(result[i]._source.attributes),
                        "value": result[i]._source.name,
                        "html": result[i]._source.name,
                    }
            ));
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="productInput" list="returnedProducts">
<datalist id="returnedProducts"></datalist>
<input id="groupName">
<input id="groupColor">
<input id="groupCategory">

Rigoberto Ramirez Cruz 6 年前

map 和 filter 为了达到这个目的。

$('#productInput').on('input', function() {
  // Moved here because of the variable scope
  var result = [{
      _source: {
        "name": "cat",
        attributes:{
           "groupColor": "blue",
           "groupCategory": "Misc",
        },
      },
 
    }, {
      _source: {
        "name": "cat1",
        attributes:{
           "groupColor": "blue",
           "groupCategory": "Misc",
        },
      },

    }, {
      _source: {
        "name": "cat2",
        attributes:{
           "groupColor": "blue",
           "groupCategory": "Misc",
        },
      },

    }, {
      _source: {
        "name": "cat33",
         attributes:{
           "groupColor": "blue",
           "groupCategory": "Misc",
        },
      },

    }];
  
  let _this = $(this);
  let foundOption;
  let optSelector = `option[value='${_this.val()}']`;
  if (_this.val() === '') {
    return;
  } else if ($('#returnedProducts').find(optSelector).length) {
   //this one works 
   var name = _this.val();
   $("#groupName").val(_this.val());
   
   // Project and filter the array
   var selected = result.map(item => item["_source"])
                        .filter(item => item["name"] == name)
                        .map(item => item["attributes"])[0];
                        
  console.log(selected)                      
   
   //I want to fill these with _source.attributes.groupColor and groupCategory
   $("#groupColor").val(selected["groupColor"]);
   $("#groupCategory").val();

  } else {

    const searchResult = $(this).val();
    $("#returnedProducts").empty();
    
    for (let i = 0; i < result.length; i++) {
      $("#returnedProducts").append("<option srindex=" + [i] + " value=" + result[i]._source.name + ">" + result[i]._source.name + "</option>");

    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="productInput" list="returnedProducts">
<datalist id="returnedProducts"></datalist>
<input id="groupName">
<input id="groupColor">
<input id="groupCategory">