将JSON数据放入一个数组中
将JSON数据放入一个数组中
我有一个JSON文件（从Google表格导出），这是我的JSON代码：
{
"Invités": {
"Boizard ": {
"Noms": "Boizard ",
"Enfants": null,
"FP": true,
"Adresse": null,
"Brunch": 7,
"Nbr FP": 2,
"OK": null,
"OK enfant": null,
"KO": null,
"Attente": null,
"mail cadeau": null,
"Remerciements": null
},
"JLV et Sylviane Chartier": {
"Noms": "JLV et Sylviane Chartier",
"Enfants": null,
"FP": true,
"Adresse": "16 av du Général de Gaulle - 94300 Vincennes",
"Brunch": 0,
"Nbr FP": 1,
"OK": null,
"OK enfant": null,
"KO": null,
"Attente": null,
"mail cadeau": null,
"Remerciements": null
},
"J.........": {
..........
..........
..........
}
}
}
我想从文件中检索JSON数据并将其放入数组中，以便在Angular中显示它们。
谢谢。
问题的原因是用户在Angular应用中想要使用一个JSON文件的数据，但是无法通过ngFor指令将数据渲染到页面上。
解决方法是将JSON文件的数据导入到一个常量数组中，然后在Angular组件中使用*ngFor指令来循环遍历数组并渲染数据到页面上。
具体的解决方法如下：
1. 创建一个新的.ts文件，将JSON文件中的类和常量数组整合在一起，并导出它们。
2. 在需要使用数据的组件中，通过import语句将.ts文件导入进来。
3. 在组件的模板文件中使用*ngFor指令，将导入的常量数组作为数据源进行遍历，并将数据渲染到页面上。
下面是具体的代码示例：
// my-data.ts文件
export class MyData {
title: string;
details: Details;
}
export class Details{
...
Noms: string;
Brunch: number;
Enfants:..... ;
...
}
export const MYDATA: MyData[] = [
{
title: ...
details: { ....
}
},
{
title: ...
details: { ....
}
},
......
];
// 组件文件
import { Component } from '@angular/core';
import { MYDATA } from './my-data';
@Component({
selector: 'app-my-component',
template: `
{{ data.title }}
{{ data.details.Noms }}
{{ data.details.Brunch }}
{{ data.details.Enfants }}
`
})
export class MyComponent {
myData = MYDATA;
}
通过以上步骤，用户就可以将JSON数据放入一个数组中，并使用*ngFor指令将数据渲染到页面上了。
