Блог

Главная - Вопросы по программированию - Как получить значения объекта, который находится внутри другого объекта

Как получить значения объекта, который находится внутри другого объекта

#javascript #html

Вопрос:

Я не из JavaScript, но у меня есть небольшое требование, когда я работаю с JavaScript.

Я пытаюсь получить значения внутри объекта, который заключен в другой объект, я написал код, но я получаю ошибку. Ниже приведен мой код, я уверен, что допустил ошибку или, возможно, синтаксис неправильный, но не смог решить проблему.

Это копия кода с фиктивными значениями, может ли кто-нибудь, пожалуйста, помочь мне и указать, где я делаю неправильно.

             const nameList = [
                'XYZ',
                'ABC',
                'PQR'
            ];

            var person = {
                XYZ: {
                    name: 'XYZ',
                    age: 30
                },
                ABC: {
                    name: 'ABC',
                    age: 40
                },
                PQR: {
                    name: 'PQR',
                    age: 50
                }
            };

            var rowCount = 0;
            var releaseTableHTML = '';
            releaseTableHTML  ='<table><thead>Just Testing</thead><tbody><tr><th>Name</th><th>Age</th></tr>';
            while (nameList.length > rowCount) {
                releaseTableHTML  ='<tr><td>'  person.nameList[rowCount].name '</td><td>'  
                person.nameList[rowCount].age '</td></tr>';
                rowCount  ;        
            }
            releaseTableHTML  ='</tbody></table>';

введите описание изображения здесь

Комментарии:

1. @Andy: nameList это массив…

2. Вам необходимо использовать обозначения в скобках вокруг вашего динамического свойства person.[nameList[rowCount]].name

3. пробовать person[nameList[rowCount]].age

4. @Andy Cerbrus указывал, что ваша рекомендация пытается nameList получить прямой доступ, а не элемент из nameList . Объекты не могут использовать массивы в качестве идентификаторов свойств.

5. @Andy: Вы говорите, что значение массива является допустимой переменной для использования в скобках. Ты говоришь person[['XYZ','ABC','PQR']] , что это то, что нужно операции… Вы, наверное, имели в виду person[nameList[someIndex]] .

Ответ №1:

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

 const obj = {
  obj1: {
    a: 1
  }
};

console.log(obj["obj1"]?.a);

это пример, и вот как это сделать в вашем случае в строке 30

 releaseTableHTML  ='<tr><td>'  person[nameList[rowCount]]?.name '</td><td>'

дело в том, что вы можете получить доступ к атрибуту внутри объекта с помощью [] и строки внутри, и здесь ваша строка является результатом массива с этим синтаксисом arr [], поэтому вы хотите что-то вроде этого — > obj[arr[]]

Ответ №2:

В нем нет никакой nameList собственности person . Просто используйте person[nameList[rowCount]].name вместо person.nameList[rowCount].name .

Обратите внимание, что это nameList[rowCount] дает вам ключ человека, и вы можете использовать его в person объекте.

 const nameList = [
  'XYZ',
  'ABC',
  'PQR'
];

var person = {
  XYZ: {
    name: 'XYZ',
    age: 30
  },
  ABC: {
    name: 'ABC',
    age: 40
  },
  PQR: {
    name: 'PQR',
    age: 50
  }
};

var rowCount = 0;
var releaseTableHTML = '';
releaseTableHTML  = '<table><thead>Just Testing</thead><tbody><tr><th>Name</th><th> Age</th ></tr > ';
while (nameList.length > rowCount) {
  releaseTableHTML  = '<tr><td>'   person[nameList[rowCount]]?.name   '</td><td>'  
    person[nameList[rowCount]]?.age   '</td></tr>';
  rowCount  ;
}
releaseTableHTML  = '</tbody></table>';


document.body.innerHTML  = (releaseTableHTML);

Ответ №3:

nameList не является свойством person , поэтому вам нужно использовать значение этого элемента массива в качестве ключа свойства, чтобы вы могли получить доступ к значению.

Я немного скорректировал ваш код, чтобы выбросить rowCount переменную и просто использовать простую for...loop .

 const nameList=["XYZ","ABC","PQR"];
const person={XYZ:{name:"XYZ",age:30},ABC:{name:"ABC",age:40},PQR:{name:"PQR",age:50}};

let releaseTableHTML = '';

releaseTableHTML  = '<table><thead>Just Testing</thead><tbody><tr><th>Name</th><th> Age </th></tr> ';

for (let i = 0; i < nameList.length; i  ) {
  releaseTableHTML  = `
    <tr>
      <td>${person[nameList[i]].name}</td>
      <td>${person[nameList[i]].age}</td>
    </tr>`;
}

releaseTableHTML  = '</tbody></table>';

document.querySelector('div').innerHTML = releaseTableHTML; 
 <div></div>

Ответ №4:

Я просто стараюсь, чтобы в вашем посте было меньше изменений. Таким образом, вы можете отобразить столбцы.

 window.onload = function(){ 

const nameList = [
            'XYZ',
            'ABC',
            'PQR'
        ];

        var person = {
            XYZ: {
                name: 'XYZ',
                age: 30
            },
            ABC: {
                name: 'ABC',
                age: 40
            },
            PQR: {
                name: 'PQR',
                age: 50
            }
        };

        var rowCount = 0;
        var releaseTableHTML = '';
       releaseTableHTML  ='<table><thead>Just Testing</thead><tbody><tr><th>Name</th><th>Age</th></tr>';
        while (nameList.length > rowCount) {
            releaseTableHTML  ='<tr><td>'  nameList[rowCount] '</td><td>'  
            person[nameList[rowCount]]['age'] '</td></tr>';
            rowCount  ;        
        }
        releaseTableHTML  ='</tbody></table>';
        document.getElementById("test").innerHTML = releaseTableHTML;
} 
 <div id="test"><div>
Метки: ,