Javascript 如何使用displaySelectedUser函数中的array.forEach函数迭代properties数组，并在UI中显示属性

我正在做这个家庭作业，它要求我使用数组

.forEach（）

函数迭代变量和属性，并在UI中显示属性。提示：*像*Age这样的给定属性有一个对应的SPAN元素和一个data Age value属性。您可以使用ES6模板字符串构建针对该属性范围的查询选择器，然后使用它查询DOM。您还希望确保仅在DOM查询成功时更新UI。这可以在

displaySelectedUser（）

aror函数中完成

ES6模板字符串似乎无法使用document.querySelector识别span标记。我尝试将ES6模板字符串仅应用于

${props}

元素，但没有效果

<script>
      const users = [];


      const computeBMI = ({weight,height,country}) => {


        const healthyCountries = ["Chad","Sierra Leone","Mali","Gambia","Uganda","Ghana","Senegal","Somalia","Ivory Coast","isreal"];

        const bmiRate = 0.82;      
        let heightInMeters = height * 0.3048;
        let BMI = weight / Math.pow(heightInMeters,2);
        if (healthyCountries.includes(country)) {
          BMI *= bmiRate;
        }
        return Number(BMI.toFixed(2));
      };


      const getSelectedUser = (userId) => {
        return users.find(({id}) => id === userId);
         };


      const displaySelectedUser = ({target}) => {
        const user = getSelectedUser(target.value);

        const properties = Object.keys(user);

        properties.forEach(props => {


          const iterate = document.querySelector(`span[data-${props}-value]`);
          if(iterate !== ""){
            iterate.textContent = user[props];          
          }
        });
      };


      const letsCalculateBMI = () => {
        const query = document.querySelector('.select-text').value;
        const user = getSelectedUser(query);
        const bmi = computeBMI(user);
        document.querySelector('.bmi-text').textContent = bmi;

      };


      const powerupTheUI = () => {
        document.querySelector('.select-text').addEventListener('change', displaySelectedUser);

        document.querySelector('#oracle').addEventListener('click', letsCalculateBMI);
      };

      const displayUsers = (users) => {

        const select = document.querySelector('.select-text');
        users.forEach(user => {
          const option = document.createElement('option');
          option.value = user.id;
          option.textContent = user.name;
          select.appendChild(option);
        }); 
      };

      const fetchAndDisplayUsers = () => {
        users.push(
        {
          age: 40,
          weight: 75,
          height: 6,
          country: 'Nigeria',
          name: 'Charles Odili',
          id: 'dfhb454768DghtF'
        },
        {
          age: 26,
          weight: 80,
          height: 5.5,
          country: 'Mali',
          name: 'Mohammed Salah',
          id: 'jdks468654Galsh'
        }
        );

        displayUsers(users);
      };

      const startApp = () => {
        powerupTheUI();
        fetchAndDisplayUsers();
      };

      startApp();
</script>

常量用户=[]；
const computeBMI=（{体重、身高、国家}）=>{
const Healthy Countries=[“乍得”、“塞拉利昂”、“马里”、“冈比亚”、“乌干达”、“加纳”、“塞内加尔”、“索马里”、“科特迪瓦”、“以色列”]；
常数bmiRate=0.82；
设高度米=高度*0.3048；
让BMI=体重/数学功率（身高米，2）；
if（健康国家，包括（国家））{
体重指数*=体重指数比率；
}
返回编号（BMI.toFixed（2））；
};
常量getSelectedUser=（用户ID）=>{
返回users.find（（{id}）=>id==userId）；
};
const displaySelectedUser=（{target}）=>{
const user=getSelectedUser（target.value）；
常量属性=Object.keys（用户）；
properties.forEach（props=>{
const iterate=document.querySelector（`span[data-${props}-value]`）；
如果（迭代！==“”）{
iterate.textContent=用户[props]；
}
});
};
const letscaleculatebmi=（）=>{
const query=document.querySelector（'.select text'）.value；
const user=getSelectedUser（查询）；
常量bmi=计算mi（用户）；
document.querySelector（'.bmi text'）。textContent=bmi；
};
常量powerupTheUI=（）=>{
document.querySelector（'.select text'）。addEventListener（'change'，displaySelectedUser）；
document.querySelector（“#oracle”）.addEventListener（'click'，letsCalculateBMI）；
};
const displayUsers=（用户）=>{
const select=document.querySelector（'.select text'）；
users.forEach（user=>{
const option=document.createElement（'option'）；
option.value=user.id；
option.textContent=user.name；
选择.appendChild（选项）；
}); 
};
const fetchAndDisplayUsers=（）=>{
用户推送(
{
年龄:40,，
体重：75，
身高：6，
国家：'尼日利亚'，
姓名：“查尔斯·奥迪利”，
id:'dfhb454768DghtF'
},
{
年龄:26,，
体重：80，
身高：5.5，
国家：'马里'，
姓名：“穆罕默德·萨拉赫”，
id:'jdks468654Galsh'
}
);
显示用户（用户）；
};
常数startApp=（）=>{
powerupTheUI（）；
fetchAndDisplayUsers（）；
};
startApp（）；

//HTML代码

<body>
    <button id="filter-query" class="mdc-icon-button material-icons">filter_list</button>
    <div class="select">
      <select class="select-text">
        <option disabled selected>Select User</option>
      </select>
    </div>
    <div class="user-photo">
      <img src="" alt="User Photo">
    </div>
    <div class="details mdc-elevation--z3">
      <p><span class="prop" data-age>Age: </span>
        <span class="value" data-age-value></span></p>
      <p><span class="prop" data-height>Height: </span>
        <span class="value" data-height-value></span></p>
      <p><span class="prop" data-weight>Weight: </span>
        <span class="value" data-weight-value></span></p>
      <p><span class="prop" data-gender>Gender: </span>
        <span class="value" data-gender-value></span></p>
      <p><span class="prop" data-country>Country: </span>
        <span class="value" data-country-value></span></p>
    </div>

    <button id="oracle" class="mdc-button">Calculate BMI</button>

    <div id="outcome">
      <h1 class="mdc-typography--headline5">BMI</h1>
      <p class="bmi-text"></p>
    </div>
<body>

过滤列表
选择用户
年龄：

高度：

重量：

性别：

国家：

计算体重指数
体重指数

我期望的结果是

querySelector

使用ES6模板字符串来选择包含属性

数据年龄值

，

日期高度值

，的span标记，

data weight value

和

data country value

并使用

properties.forEach（）在
displaySelectedUser=（{target}）中的
循环中，将年龄、身高、体重和国家的对应值写入相应的
span
标记中
箭头函数。
您编写的代码是正确的。我将确认选择器是否正确使用ES6字符串模板文字语法。您已经建立了代码和预期的输出，但是对于控制台中的错误或其他错误情况，您一句话也没有说。关于错误以及变量
iterate
在该循环中包含的内容，您能告诉我们什么？您编写的代码是正确的。我将确认选择器是否正确使用ES6字符串模板文字语法。您已经建立了代码和预期的输出，但是对于控制台中的错误或其他错误情况，您一句话也没有说。关于错误，您能告诉我们什么？变量
iterate
在该循环中包含什么？