Как получить значение коллекции объектов javascript?

Question

У меня неопределенное значение из коллекции объектов, когда нужно отобразить сообщение.

Я должен получить значение и отобразить его.

Кто-нибудь знает, в чем проблема, или я что-то упускаю?

ссылка полный код - 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 - это массив , содержащий объекты. Чтобы получить доступ к элементам в массиве, вам нужно получить к ним доступ через их индекс. В настоящее время вы пытаетесь получить доступ к значению в вашем массиве, используя ненулевое c строковое значение, и вы получите undefined. Вместо этого вы можете использовать метод .find(), который принимает функцию в качестве аргумента. Функция будет вызываться для каждого объекта в вашем массиве ratesValue. Если функция возвращает true для данного элемента, возвращаемым значением для .find() будет этот элемент. Используя эту идею, вы можете вернуть true, когда свойство key для данного элемента / объекта равно выбранному значению:

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>

Answer 2

ratesValue - это массив объектов, поэтому вам нужно filter массив, чтобы получить нужный объект по ключу.

, поэтому измените эту функцию следующим образом

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