如何获取javascript对象集合的值？

Question

我在显示消息时从对象集合中得到一个未定义的值。

我应该获取值并显示它。

有人知道问题出在哪里吗？或者我可能遗漏了什么？

link 完整代码 - https://jsfiddle.net/lmanhaes/cq1g5dyt/1/

谢谢。

const ratesValue = [{
    "key": "Pound Sterling",
    "value": 1.30,
  },
  {
    "key": "Euro",
    "value": 1.30,
  },
  {
    "key": "Yen",
    "value": 142.72,
  },
  {
    "key": "Yuan",
    "value": 8.95,
  },
  {
    "key": "Swiss Franc",
    "value": 1.26,
  },
  {
    "key": "Canadian Dollar",
    "value": 1.69,
  },

];


function getCurrency() {
  let cur_type = document.getElementById('currencies').value.trim()
  // trim() method to remove whitespaces and present clean and optimal string

  let msg = cur_type ? "One US Dollar buys you " + ratesValue[cur_type] + " " + cur_type : ""
  document.getElementById("exchangerate").innerHTML = msg
}

// event handler -- put in place to be used when value selected from dropdown list.
window.onload = function () {
  getCurrency();

};

<h1>Currency Exchange Rates to US Dollar</h1>
<!--value of an element has been changed.-->
<select id="currencies" onchange="getCurrency()">
  <option value="">Select a currency</option>
  <option>Pound Sterling</option>
  <option>Euro</option>
  <option>Yen</option>
  <option>Yuan</option>
  <option>Swiss Franc</option>
  <option>Canadian Dollar</option>
</select>
<p id="exchangerate"></p>

Answer 1

ratesValue是对象数组，所以你必须filter数组才能通过key得到你需要的对象。

所以像这样改变这个功能

const value = ratesValue.find(item=>item.key === cur_type).value;
let msg = cur_type ? "One US Dollar buys you " + value + " " + cur_type : ""

Answer 2

您的问题是 ratesValue 是一个包含对象的数组。要访问数组中的项目，您需要通过它们的索引来访问它们。目前您正在尝试使用非数字字符串值访问数组中的值，因此您将得到 undefined。相反，您可以使用接受函数作为参数的 .find() 方法。将为 ratesValue 数组中的每个对象调用该函数。如果给定项目的函数 returns true，则 .find() 的 return 值将是该项目。使用这个想法，当给定 item/object 的 key 属性等于所选值时，您可以 return true：

const ratesValue = [{ "key": "Pound Sterling", "value": 1.30, }, { "key": "Euro", "value": 1.30, }, { "key": "Yen", "value": 142.72, }, { "key": "Yuan", "value": 8.95, }, { "key": "Swiss Franc", "value": 1.26, }, { "key": "Canadian Dollar", "value": 1.69, }, ];

function getCurrency() {
  const cur_type = document.getElementById('currencies').value.trim();
  const rateObj = ratesValue.find(obj => obj.key === cur_type);
  const msg = cur_type ? "One US Dollar buys you " + rateObj.value + " " + cur_type : "";
  document.getElementById("exchangerate").innerHTML = msg;
}

<h1>Currency Exchange Rates to US Dollar</h1>
<select id="currencies" onchange="getCurrency()">
  <option value="">Select a currency</option>
  <option>Pound Sterling</option>
  <option>Euro</option>
  <option>Yen</option>
  <option>Yuan</option>
  <option>Swiss Franc</option>
  <option>Canadian Dollar</option>
</select>
<p id="exchangerate"></p>

或者，您可以将 ratesValue 数组转换为 Map 以保留键值对。您创建的地图可以包含来自对象的 key 属性的键和来自对象的 value 属性的值：

const ratesValue = [{ "key": "Pound Sterling", "value": 1.30, }, { "key": "Euro", "value": 1.30, }, { "key": "Yen", "value": 142.72, }, { "key": "Yuan", "value": 8.95, }, { "key": "Swiss Franc", "value": 1.26, }, { "key": "Canadian Dollar", "value": 1.69, }, ];

const ratesMap = new Map(ratesValue.map(({key, value}) => [key, value]));

function getCurrency() {
  const cur_type = document.getElementById('currencies').value.trim();
  const msg = cur_type ? "One US Dollar buys you " + ratesMap.get(cur_type)  + " " + cur_type : "";
  document.getElementById("exchangerate").innerHTML = msg;
}

<h1>Currency Exchange Rates to US Dollar</h1>
<!--value of an element has been changed.-->
<select id="currencies" onchange="getCurrency()">
  <option value="">Select a currency</option>
  <option>Pound Sterling</option>
  <option>Euro</option>
  <option>Yen</option>
  <option>Yuan</option>
  <option>Swiss Franc</option>
  <option>Canadian Dollar</option>
</select>
<p id="exchangerate"></p>

如何获取javascript对象集合的值？

How to get the value of the a javascript object collection?

javascript

object

key-value