Как перебрать многовложенный объект JSON для функции раскрывающегося списка в Angular 6?
Я работаю в Angular 6.0 и столкнулся с проблемой использования HttpClient для повторения моих данных JSON, которые я читаю из локального файла в папке с ресурсами.
Вот мои данные JSON
[{
"configKey": [{
"user1": [{
"subconfig": [{
"name": "program Id",
"type": "String"
}, {
"name": "brand ID",
"type": "String"
}]
}],
"user2": {
"subconfig": [{
"name": "program Id",
"type": "String"
}, {
"name": "brand ID",
"type": "String"
}]
},
"user3": {
"subconfig": [{
"name": "program Id",
"type": "String"
}, {
"name": "brand ID",
"type": "String"
}]
}
}]
}]
Вот мой текущий код в файле компонента ts
rule:Array<any> =[];
loadinfo(){
this.http.get<any[]>("assets/test.json")
.subscribe(data=>{
this.rule = data;
})
}
Вот что у меня есть в файле HTML
<label>
<select>
<option *ngFor = "let og of rule">
{{og.configKey}}
</option>
</select>
</label>
В моей ожидаемой конечной цели я должен иметь возможность заполнить раскрывающийся список на основе предыдущего выбора. (например, я выбираю user1, список должен быть заполнен «именами» в его дереве пользователей в JSON). Однако я еще не добрался до этой части и просто хотел бы помочь с простым заполнением раскрывающегося списка именами из моего дерева JSON.
Из моего предыдущего исследования я понял, что HttpClient возвращает только объекты, а *ngFor работает только с массивами. Я попытался изменить объект на массив, но мой результат — это просто еще одна ошибка, в которой говорится, что ngFor может выполнять итерацию только по объектам. Есть ли способ изменить весь мой вложенный объект JSON на массив?
Для чего это стоит, вот мои данные JSON в консоли Консоль JSON
Как мне сделать мои данные итерируемыми с помощью * ngFor и как мне перейти к именам? Я бы предположил, что в html это будет что-то вроде этого? :
//TEST CODE????
<label>
<select>
<option *ngFor = "let og of rule">
{{og.configKey.user1.subconfig.name}}
</option>
</select>
</label>
Любая помощь будет оценена по достоинству! заранее спасибо
Ответы 1
Вы можете перебирать объекты с помощью keyvalue трубы. (https://angular.io/api/common/KeyValuePipe)
Вы можете сделать это следующим образом:
<div *ngFor = "let config of res | keyvalue">
<div>{{config.key}}</div>
<div *ngFor = "let users of config.value">
<div *ngFor = "let user of users | keyvalue">
<div>{{user.key}}</div>
<div *ngFor = "let subcfgs of user.value | keyvalue">
<div>{{subcfgs.key}}</div>
<div *ngFor = "let subcfg of subcfgs.value">
<div>name: {{subcfg.name}}</div>
<div>type: {{subcfg.type}}</div>
</div>
</div>
</div>
</div>
</div>
стекблиц: https://stackblitz.com/edit/angular-ph76ya
Я отредактировал ваш JSON.
Эй, спасибо! Это действительно полезно! Я обновил свой angular, чтобы иметь возможность использовать KeyValue Pipe, и он работает. У меня есть еще один вопрос, если вы не против помочь мне. Есть ли конкретный способ, которым я могу выполнить итерацию для конкретного пользователя? Скажем, я хочу показать раскрывающееся имя и тип только для определенного пользователя. Как бы я перешел к этому конкретному пользователю? Я попытался изменить «пользователей» на что-то вроде «users.user1», но это, похоже, не сработало... Еще раз спасибо!
Как насчет использования *ngIf для отображения конкретного пользователя? лайк *ngIf = "user.key === 'specificUserName'"
@zmag Как это вложенное значение может быть заполнено в раскрывающемся списке / выборе? Например, список имен.