javascript - 如何用值检索键

Question

当我提交表单时，提交的字段之一是 ID(数字)而不是名称，以便服务器更容易处理。像这样:

HTML 下拉选择

<select ng-model="myColor" class="form-control"
    ng-options = "color.ID as color.color for color in $parent.colorSelection">
</select>

AngularJS

$scope.colorSelection = [{"color": "Red", "ID": "7011"}, {"color": "Blue", "ID": "7012"}];

所以服务器发回一个JSON

res.json({
    Color: req.query.color, 
});

现在当我得到结果时，我想显示名称而不是服务器发回给我的 ID 号。所以我不想显示“7011”，而是显示“Red”。我该怎么做呢？执行以下操作无效。

{{results.Color.color}}

Answer 1

由于 colorSelection 是一个数组，您必须直接遍历它或使用其中一个数组函数来遍历它。

在这种情况下，find 可能是您想要的(如果 Angular 还没有为您填充它，您可能需要在旧版浏览器上填充它):

var entry = $scope.colorSelection.find(function(entry) { return entry.ID == results.Color.color; });
var color = entry && entry.color;

color 将为 null(未找到)或颜色名称。

ES2015 不那么笨重:

let entry = $scope.colorSelection.find(entry => entry.ID == results.Color.color);
let color = entry && entry.color;

---

另一种方法是使用颜色 ID 到名称的可重用映射:

在 ES5 中，你可能会使用一个对象:

// One-time initialization of the map, just after you create
// $scope.colorSelection
$scope.colorSelectionMap = Object.create(null);
$scope.colorSelection.forEach(function(entry) {
    $scope.colorSelectionMap[entry.ID] = entry.color;
});

然后

var color = $scope.colorSelectionMap[results.Color.color];

在 ES2015 中，您仍然可以这样做，或者您可以使用 Map:

// One-time initialization of the map, just after you create
// $scope.colorSelection
$scope.colorSelectionMap = new Map(
    $scope.colorSelection.map(entry => [entry.ID, entry.color])
);

然后

var color = $scope.colorSelectionMap.get(results.Color.color);