Question

我下面有一个有效的代码段，如果您在第一个输入中开始输入Cat，则下拉列表将正确填充，如果单击一个，它将在第一个框中填充“名称”值，这是正确的。但是，如何获取较低级别的属性来填充其他输入呢？

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

属性与源中“名称”处于同一级别，它只是一个新数组任何帮助表示赞赏

$('#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">

Answer 1

您可以投影数组以仅检索选定元素的项目，使用map和filter来实现。

foo = 6
foo = null

$('#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>");

    }
  }
});

Answer 2

我建议更改您创建选项的方式：

extern "C" void* GetEnvironmentTexture() {
    AREnvironmentProbeAnchor* anchor = [self updatedEnvironmentProbeAnchor];
    return (__bridge_retained void*) [anchor environmentTexture];
}

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

fetch('http://localhost:8080/game/players/', {
    method: 'POST',
    mode: 'cors'
},
body: JSON.stringify({
    name: ${this.state.name},
})
)
.then(res => res.json())
.then(res => {
    const newState = this.state.newPlayers;
    newState.push(res);
    this.setState({newPlayers: newState})
})

通过这种方式，您可以获得属性：

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

现在，您可以获得值：

$("#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);

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

2 个答案: