Получение ключей и значений из json в Angular
Мне нужно получить значения из json (из объединенных таблиц MySQL).
Я пробовал несколько решений из предыдущей темы, но ни одно из них не сработало для меня.
ключ доступа и значение объекта с использованием *ngFor
мой формат JSON:
[
{
"idemployee":1,
"name":"Ernest",
"surename":"Pająk",
"role":"Obsługa Baru",
"employeehours":[
{
"idemployeehours":1,
"date":"2019-01-10T23:00:00.000+0000",
"quantity":8.0
}
]
}
]
и я получил «Ключ: 0 и значение:» (ответ из темы Pardeep Jain выше)
Обновлено: это мой код:
<div *ngFor = "let item of employee| keyvalue">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
сотрудник приходит из компонента Angular и дает упомянутый JSON. Проблема заключается в получении вложенных значений из "employeehours" (например, количество)
Покажи свой код.
Ссылка, которую вы упомянули, предназначена для итерации свойств объекта (ключ, значение), но, согласно вашим данным, у вас есть простой массив объектов. Это правильно?
ну, employeehours тоже массив, так зачем вам использовать keyvalue?
Да, это массив объектов. Я не знаю, нужно ли мне использовать ключевое значение, мне просто нужно поместить значения из «employeehours» (например, количество) в таблицу.
Ответы 2
если вы запускаете канал keyValue для объекта массива, вы получаете ключи как индекс значений в массиве, поэтому вам нужен вложенный ngFor для запуска канала keyvalue для значения массива
<div *ngFor = "let item of employee">
<div *ngFor = "let emp of item |keyvalue ">
Key: <b>{{emp.key}}</b> and Value: <b>{{emp.value}}</b>
</div>
</div>
ОБНОВЛЕНО!
если вы хотите поддерживать значение ключей sohow для сотрудников, где значение представляет собой массив, лучшие случаи здесь, чтобы создать компонент для всего этого и использовать этот компонент для рендеринга новых значений, таких как рекурсия
компонент
export class RenderComponent {
@Input() items = [];
isArray(value) {
return value instanceof Array
}
}
шаблон
<div *ngFor = "let item of items">
<div *ngFor = "let obj of item | keyvalue " class = "well">
Key: <b>{{obj.key}}</b> and Value: <b>{{obj.value}}</b>
<ng-container *ngIf = "isArray(obj.value)">
<render [items] = "obj.value"></render>
</ng-container>
</div>
</div>
Как насчет получения только запрошенных значений, таких как «количество» (все из массива), а не всех значений из объекта?
Вам не нужна труба keyvalue. employeehours — это массив, поэтому вам просто нужен вложенный *ngFor для массива, поэтому пример, когда вы сохранили свои данные в массиве employees:
<div *ngFor = "let emp of employees">
<p>Name: {{emp.name}} {{emp.surename}}</p>
<div *ngFor = "let hour of emp.employeehours">
<p>Date: {{hour.date | date: 'shortDate'}}</p>
<p>Quantity: {{hour.quantity}}</p>
</div>
</div>
Спасибо ! Это был ход
Укажите минимальный воспроизводимый пример того, как вы адаптировали существующие ответы к вашей конкретной проблеме.