如何在Angular 2中获取JSON文件
因为我是Angular的新手，所以有人可以提供一个简单的解决方案来使用angular 2加载JSON文件数据。
我的代码如下
Index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
app.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div id="main">
Main Div
<div id = "header"></div>
<div id = "content">
<ul class="games">
<li>
</li>
</ul>
</div>
</div>
`
})
export class AppComponent {
}
games.json
{
"games":[
{
"title":"Primary Operations",
"enabled":true
},
{
"title":"Curated Games",
"enabled":false
}
]
}
我想将所有游戏从games.json提取到app.component.ts的li中，请详细告知。
问题答案：
这是我解析JSON的代码的一部分，可能对您有帮助：
import { Component, Input } from '@angular/core';
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class AppServices{
constructor(private http: Http) {
var obj;
this.getJSON().subscribe(data => obj=data, error => console.log(error));
}
public getJSON(): Observable<any> {
return this.http.get("./file.json")
.map((res:any) => res.json())
.catch((error:any) => console.log(error));
}
}
-
我想使用动态生成的选择下拉菜单进行导航。似乎我不能直接这样做，所以我只想在选择更改时进行函数调用。 为此，我有以下几点： ---在模板中--- 只要说“navButtons”是一个具有“label”字段的对象数组就足够了。 ---在课堂上--- 这实际上工作正常。 我是在马克·拉科克的大力帮助下得出这一点的，他在这个老问题上给出了答案：如何在Angular 2中的“select”中获得新的选择？
-
问题内容： 我正在尝试使用Flask构建一个简单的API，现在我想在其中读取一些POSTed JSON。我使用Postman Chrome扩展程序进行POST，而我发布的JSON就是。我尝试使用以下方法读取JSON： 在浏览器上，它可以正确返回我放入GET中的UUID，但是在控制台上，它只是打印出来（我希望它可以在其中打印出来。有人知道我如何从Flask方法中获取发布的JSON吗？ 问题答案： 首
-
问题内容： 我正在尝试使用Flask构建一个简单的API，现在我想在其中读取一些。我使用扩展程序进行，而我发布的就是。我尝试使用以下方法读取JSON： 在浏览器上，它可以正确返回我放入GET中的UUID，但是在控制台上，它只是打印出来（我希望它可以在其中打印出来。有人知道我如何从方法中获取发布的吗？ 问题答案： 首先，该.json属性是一个委托给的属性，该属性记录了您None在此处看到的原因。 您
-
问题内容： 如何使用PHP从JSON对象获取数据？ 这是我拥有的PHP代码： 问题答案： foreach($json as $i){ echo $i[‘name’]; }
-
问题内容： 我的脚本当前如下所示： 日期“ x”和事件“ x”是一系列html标签。页面加载（onload）时运行此功能。我的目标是仅从本地.json文件而不是上面获得的硬代码执行同一操作。我已经签出了http://api.jquery.com/jQuery.getJSON/。 本地.json文件如下所示： 有什么建议？ 问题答案： 假设您说.json文件的意思是“本地文件系统上的文件”。 您需要
-
我试图创建一个数据网格——或者在angular2中用JSON对象创建一个表格。我的问题是我不知道表中有多少列，也不知道这些列的名称。 从我目前的理解我需要定义世界卫生大会 也许一个例子会让事情变得更清楚。。。 下面是我需要在同一个表中呈现的两个JSON示例... 示例1 示例 2 这里有我的组件… 表格： 应用程序字段映射行： 注意：这是我卡住的地方！ 我如何创建正确的数量的细胞和h 我没能找到任