如何在Angular 8中访问JSON响应中的数据？
在Angular 8中访问JSON响应中的数据可以通过以下步骤实现：
- 首先，确保你已经安装了Angular CLI并创建了一个新的Angular项目。
- 在你的组件文件中，首先导入HttpClient模块和Observable对象：
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';- 在组件的构造函数中注入HttpClient模块：
constructor(private http: HttpClient) { }- 创建一个方法来发送HTTP请求并获取JSON响应数据：
getData(): Observable<any> {
return this.http.get<any>('your_api_url');
}- 在组件的某个方法中调用getData()方法，并订阅返回的Observable对象：
this.getData().subscribe(data => {
// 在这里处理获取到的JSON响应数据
});- 在订阅的回调函数中，你可以通过data变量访问到JSON响应中的数据。你可以根据数据的结构进行处理，例如：
this.getData().subscribe(data => {
console.log(data); // 打印JSON响应数据到控制台
// 访问特定字段
console.log(data.field1);
// 遍历数组
data.array.forEach(item => {
console.log(item);
});
});这样，你就可以在Angular 8中访问JSON响应中的数据了。
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，建议你参考腾讯云的官方文档和开发者社区，以获取更多关于腾讯云在云计算领域的相关产品和解决方案。
相关·内容
我刚接触angular，并使用angular CLI 7开发了一个angular应用程序。当我从本地系统运行该应用程序时，我得到了服务的响应，它工作得很好。
但是，当我在生产服务器上部署应用程序时，我无法从服务获得响应。服务响应和获取状态未知错误的HTTPErrorResponse花费的时间太长。
我们使用Spring微服务进行api调用来获取响应数据。
我使用服务的proxy.conf.json，因为运行angular应用程序的URL与服务不同。
proxy.conf.json：
{
"/api/*":{
"target":"htt
浏览 0提问于2019-08-31得票数 0
在Angular项目中，我使用JSON服务器来获取虚拟数据。但目前我正在尝试在angular项目中实现PWA。我能够获取静态数据。我还想显示api响应。我对Angular是个新手。请告诉我如何在浏览器的缓存中获取json api响应数据并在PWA中使用？
浏览 0提问于2020-12-28得票数 0
我知道Android中的jsonparsing。如果下面是JSON响应
{
"contacts": [
{
"id": "c200",
"name": "Ravi Tamada",
"email": "ravi@gmail.com",
"address": "xx-xx-xxxx,x - street, x -
浏览 2提问于2017-08-17得票数 0
我想动态地构建一个基于json响应的表单，或者从角2中数据库驱动的元数据集合/表中构建表单。
日1 :在json响应对象中有3个字段。
{
"first_name : "John",
"last_name" : "Doe",
"phone" : "88888888"
}
来自此响应的表单如下所示：
First name: John
Last Name: Doe
Phone: 88888888
Day 5 :，另一个名为email的字段被添加到json响应中，如下所示。
{
"fi
浏览 0提问于2016-09-29得票数 0
2回答
我正在使用Protractor为一个Angular应用程序编写端到端测试。应用程序使用API服务从后端检索数据，然后使用这些数据填充Angular应用程序中的页面。
我想利用这个API来获取数据，以便在我的jasmine测试中使用，测试将确认后端数据在UI中的可用页面上被正确且完整地填充。我绝对不想模仿服务器，我想访问实际的服务器并使用来自JSON响应的实际数据。
我的问题有两个方面:如何从我的量角器测试中调用API服务；第二，如何从该API的JSON响应中检索数据。
任何(详细的)信息，例子，你可以提供如何做到这一点，将不胜感激
提前谢谢。
浏览 1提问于2014-06-27得票数 4
我正在试图弄清楚如何在同一个基于Angular 7的网站上同时提供网页和数据。各种各样的谷歌查询都没有让我找到答案。 Angular使用index.html定义的页面外部框架(默认情况下，由AppModule定义的外壳嵌入到该框架中)自上而下构建响应(不像ASP.NET，与请求的URL对应的页面声明要嵌入的母版页)。因此，Angular项目的结构似乎旨在使用一种类型的响应来响应请求: HTML响应。 那么，如果我希望同一网站还提供一组HTTP服务，这些服务以JSON格式返回数据，并以"application/json“的形式提供，那么我该如何组织这些内容呢？如何路由到这些服务，以及如
浏览 20提问于2019-04-30得票数 0
productsearch.service.ts
import { Injectable } from '@angular/core';
import { URLSearchParams, Jsonp } from '@angular/http';
@Injectable()
export class ProductsearchService {
private _url: string = 'app/apidata/products.json'
constructor(private jsonp: Jsonp) {}
浏览 0提问于2016-12-07得票数 0
我有一个angular应用程序。我将数据发送到php api payment.php，它反过来向支付网关发出请求。对支付网关的请求的一个参数是回调url，在这种情况下，回调url是callback.php。
步骤：
当我将数据从angular发布到payment.php时，会向支付网关发出请求。如果参数正确，支付网关会响应payment.php，并显示正在处理支付(这部分我可以作为json在Angular中获得)。
处理完成后，支付网关向callback.php返回响应，确认成功或失败。
我现在被困在如何从我的angular应用程序中获得来自callback.php的确认消息。如何监听call
浏览 1提问于2020-07-23得票数 0
2回答
我很难从一个有角度的JSON响应中显示数据。我为数据interndata.model.ts创建了一个类
export class Interndata {
humidity: number;
temperature: number;
constructor(humidity:number, temperature:number) {
this.humidity = humidity;
this.temperature = temperature;
}
}
为此，我使用了一个服务interndata.service.ts。
import { Injectable } fro
浏览 3提问于2019-08-16得票数 0
我是angular和Angular 6的新手。我有一个API，它的400错误请求如下
POST /register
{
"success": false,
"error": {
"email": [
"Enter a valid email address."
]
}
}
我正在尝试调用angular中的API，如下所示
register(username: string, email: string, password, first_name: s
浏览 0提问于2018-11-06得票数 0
3回答
这里我使用了来自Angular 6的HTTP请求，它击中了.net核心Web调用，但是我没有将响应输出返回到Angular 6，在控制台中得到了一个错误：
“CORS策略阻止从源'‘访问’‘：请求的资源上不存在’访问控制-允许-原产地‘标题。”
但我有点困惑，如果这是任何CORS启用访问问题，它将不会击中web调用。但是它击中了API调用，我没有得到响应。
Angular 6 HTTP POST请求：
this.http.post("http://localhost:55654/api/login/auth", credentials, {
headers:
浏览 0提问于2019-05-16得票数 4
我想在jsp页面中对spring mvc控制器进行一个角度http调用(通过提交json数据)，我不想得到对角度http调用的响应，相反，我想从spting mvc控制器加载一个新的jsp页面，并执行控制器方法。
如果有任何不同的进程，可以共享控制器方法如何编写(用于加载新页面而不是将响应发送回angular http调用)和angular http调用。
浏览 1提问于2016-12-29得票数 1
1回答
角JS提取JSON数据
、、、
我正在努力学习如何创建web应用程序。我在网上浏览了，并试图对其进行修改，以存储一些关于基地的信息
我现在有一个调用ngview指令的index.html文件。我已经将html页面分成两个模板和两个控制器。
我还使用自定义服务从包含我正在处理的数据的JSON文件中获取信息。
下面是我的代码"app.js“，它调用相应的页面和模板：
'use strict';
/* App Module */
var bracApp = angular.module('bracApp', [
'ngRoute',
'bracContro
浏览 0提问于2014-08-12得票数 1
我对angularjs很陌生，我试图使用angularjs client.Initially来使用wcf restful服务，我尝试了http.get(url)，并通过在我想调用的wcf服务方法中添加以下代码解决了CORS问题。
( WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Origin"，"")；WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control
浏览 3提问于2016-11-03得票数 2
我已经在Angular 4中创建了一个服务，并且正在使用以下代码通过REST/JSON (Angular的新手)获取数据：
接口
export interface IItem {
Id: number;
Title: string;
}
服务
import { IItem } from './item';
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/commo
浏览 4提问于2017-10-13得票数 0
我正在将一些代码从Angular1迁移到Angular2，并且遇到了一些问题。我可以打开json响应，填充模板，并从模板ng函数访问数据，但不能直接从component类访问数据。从我所读到的内容和看到的错误消息来看，json http / observable似乎没有返回一个纯Angular2对象，所以我怀疑我需要重新映射它，但不确定如何重新映射它。我认为也应该有可能使用onPromise回到承诺，但没有设法让它工作。我花了很多时间在谷歌上寻找解决方案，并试图实现其中的大多数，但没有运气。如果有人能建议如何将响应重新映射为可用的格式或直接访问响应中的数据，将不胜感激。
来自服务的http调用
浏览 0提问于2016-01-21得票数 2
1回答
在抓取网页时，我得到了不同的响应类型(image/text/html/json/css/js等)。我只需要.json文件，不需要其他文件。如何使用HtmlUnit过滤其他响应类型？
问题是:所需的数据存储在特定的.json文件中，而该.json文件没有唯一的url。因此，我计划过滤其他响应类型并下载所有json文件的内容。稍后我将清理数据。
请帮帮忙。一个想法就足够了。
浏览 1提问于2015-06-09得票数 0
在这种情况下，在模板Angular5中显示数据的最佳方法是什么：
我在这里从Firestore (=firebase)加载数据：
ngOnInit() {
this.user = this.authService.afAuth.authState;
this.user.subscribe((auth) => {
if (auth) {
this.itemService.getTestMembers(auth.uid).subscribe(testMembers => {
this.testMembers
浏览 0提问于2018-01-20得票数 1
回答已采纳
2回答
我已经用angular编写了一个简单的应用程序，其中我将json数据直接编码到控制器的$scope中，然后使用这些数据进行操作。我可以拥有像data.json这样的东西，并将它与js和css文件一起发送给客户端，这样angular就可以读取了吗？我该怎么做呢？不允许使用Ajax。
浏览 0提问于2014-09-11得票数 0
我有一个component.ts文件，它正在进行http调用&检索json数据作为响应。我需要在另一个component.ts文件中使用此响应。有人能告诉我怎么处理这个吗？第一个component.ts：
@Component({
selector: 'app-cat',
templateUrl: './first.component.html',
styleUrls: ['./first.component.css']
})
export class firstComponent extends Lifecycle {
th
浏览 0提问于2018-08-08得票数 0
我是Angular的新手。我正在尝试获取Json数据，它是这样写的：
id:1,
name: "Friends",
type: "Group",
现在，我知道我不能使用这种数据，除非我添加双引号-就像这样(这是它工作的唯一方式)：
"id":1,
"name": "Friends",
"type": "Group",
在Angular中解析JSON的最佳方式是什么？
我尝试过组合JS，但它不起作用：
app.controller('contacts', functio
浏览 19提问于2017-02-10得票数 2
回答已采纳
这是我的示例，我不是获取响应头，而是返回未定义的响应头--我正在尝试获得自定义响应头，如reponse.Header‘reponse.header’，但它返回未定义的响应头。
我刚接触角质js，请告诉我你的想法
提前感谢
//我试图在这里获得自定义响应头(使用警告(response.headers)；)
控制器
UIAppRoute.controller('test', ['$scope', 'checkStatus', function($scope, checkStatus) {
$scope.data = {};
check
浏览 4提问于2014-04-15得票数 4
回答已采纳
我正在尝试获得一个factory JSON响应，并将其保存在一个变量中，以便准备从两个不同的controllers中调用。
下面我粘贴我正在使用的代码：
storyFactory.js
var story = angular.module('story.services', []);
story.factory('storyAudio', [ '$http', function ($http) {
var json = {};
function getJSON(story_id, callback) {
$http({
浏览 2提问于2016-05-10得票数 2
回答已采纳
如何使用angularjs将json数据从FirstCtrl发送到secondCtrl。
有人能帮我解决这件事吗。
First.js：
angular.module('myApp')
.controller('FirstCtrl', function ($scope) {
//firstCtrl json data
$.getJSON("sample.json", function (json) {
console.log(json);
});
});
Second
浏览 1提问于2016-02-15得票数 1
回答已采纳
我正在使用angular和nodejs作为后端，我想从后端服务器获得我的响应和状态代码。目前，我只能获取响应数据，但不知道如何获取状态代码。我需要它来检查请求是如何进入后端服务器的。
这是我的angular CityService代码。
import { HttpClient } from '@angular/common/http';
export class CityService {
constructor(private http: HttpClient) { }
API_URI = 'http://localhost:5000'
g
浏览 1提问于2021-05-18得票数 0
我将此数据{id="1"，title="foo"，imagedescription=“id=”}
这是我的PHP端点
<?php
// This will update a photo that has been edited
if (isset($_GET['id'], $_GET['title'], $_GET['imagedescription']))
{
$id= $_GET['id'];
$title= trim($_GET['title']);
$image
浏览 2提问于2016-08-26得票数 1
回答已采纳
试图运行角2应用程序。在Visual 2015中创建了.NET 4.5.2版本的空项目，并使用tsconfig.json将所有类型记录编译到构建目录中，我正在参考Build目录库文件夹中的文件。但它写着“404号main.js找不到”。
我需要一种方式从构建目录服务内容，而不是存在类型记录文件的src/app目录。
我的tsconfig.json将ts文件编译成build/app目录中的js文件：
{
"compilerOptions": {
"outDir": "build/app",
"
浏览 0提问于2016-06-27得票数 0
我是angular的新手，我正在看一系列教程。我正在为我的数据库使用Firebase。下面的图片是我从数据库中获取数据列表的代码。但不幸的是，我得到了一个错误，如下图所示。 我还尝试将响应类型更改为any .subscribe((response: any) => { 但在获取我的数据时，它抛出了一个错误，ERROR TypeError: response.json is not a function说 ? ? 顺便说一句，我正在运行"@angular/cli": "~11.0.1"
浏览 7提问于2020-11-30得票数 0
回答已采纳
假设我有一个由Spring Framework呈现的页面。这是一个带有Angular 2代码的页面。如果Spring发送数据，我如何在页面上接收数据？我不想呈现一个页面，然后做一个HTTP请求，然后得到一个响应。不，在Spring控制器中，我想发送数据，然后用Angular 2以某种方式接收数据并显示(不需要额外的请求)。使用JSP很明显，但是如何在渲染页面时从Spring发送的JSON中设置Angular 2模型呢？
我现在拥有的是Spring Security管理登录。然后，在控制器中根据用户准备数据，然后我想将其发送到Angular 2页面。因此，我被困在不知道如何渲染页面和附加数据，以
浏览 1提问于2016-03-12得票数 2
1回答
我正在尝试从我的Angular应用程序调用API，并使用数据返回到我的前端。我得到了返回的响应，但我不确定如何从JSON中获取特定字段并将其存储到数组中
dataList;
apiUrl = 'GetDatafromSys?prj=123;
constructor(service: DataService) {
service.get<any>(this.apiUrl).subscribe(x => {this.dataList = (JSON.stringify(x)); });
}
我得到了像JSON一样的dataList。
[
{
浏览 9提问于2019-08-16得票数 0
回答已采纳
我想在angular8中为下面嵌套的JSON响应定义一个模型类。
JSON答复：
{
"message": "All Users fetched",
"status": "Success",
"data": [
{
"userid": "abc22",
"password": "abc22",
"role": 1,
"sessionid": "A
浏览 1提问于2021-09-08得票数 1
回答已采纳
使用application，我试图定义一个接受application/json的POST端点来执行以下操作：
异步触发Lambda
使用由请求体中的元素组成的JSON有效负载进行响应
我有第一份工作。我想是按书写的。
我被绊倒了。在响应映射模板的上下文中，我似乎无法访问请求体。我可以使用$input.params访问原始查询params，但是我找不到任何属性来给出原始请求体，我需要它来获取我想要响应的数据。要么是这样，要么我需要弄清楚如何异步启动Lambda来提供原始的请求体。
有人知道这是否可能吗？
我的目标是确保我的API能够尽可能快地响应，而不会出现冷启动Lambda来响
浏览 0提问于2019-02-02得票数 4
回答已采纳
1回答
这是我的angular服务类代码，我在这个类中调用了restful web服务，响应即将到来。响应头具有JWT web令牌我要读取响应头并在此authUser服务函数中获取JWT web令牌。该怎么做呢？
import { Injectable } from '@angular/core';
import {ResponseBeanModule} from '../../module/responsebean/responsebean.module';
import { Http, Headers, Response } from '@angular/h
浏览 0提问于2018-10-09得票数 1
我已经用Angular 5编写了一个身份验证服务，它使用HttpClient类向我的后端发出POST请求。后端通过发送JWT承载令牌进行响应。
我的请求看起来像这样：
return this.http.post('http://127.0.0.1:8080/api/v1/login', {
'username': username,
'password': password
}, {
headers: new HttpHeaders()
.set('Content-Type', 'application
浏览 6提问于2017-12-11得票数 7
回答已采纳
1回答
我得到了作为Resource对象的用户详细信息的响应。我需要把它转换成JSON。我试过了
angular.toJson(res_obj)
但它给了我空的绳子。
第一个是console.log(res_obj)。第二个响应是console.log(angular.toJson(res_obj))。
我对角质很陌生。请帮我处理这个。
浏览 0提问于2017-05-30得票数 1
回答已采纳
这是(custom.component.html)文件
<input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()">
<div *ngFor="let s of filteredScreenshots">
{{s | json}}
</div>
<mat-card class="exampl
浏览 2提问于2018-08-06得票数 0
回答已采纳
我试图从json文件中读取数据到angular.js中，但是我没有得到数据。
[
{
"code": "AD",
"name": "Andorra",
"population": "84000"
},
{
"code": "TN",
"name": "Tunisia",
"population": "10589025"
},
{
浏览 0提问于2016-02-01得票数 0
1回答
异步REST请求离子
、、、
我试图将数据保存到IonicStorageModule中，从请求到REST，数据是用户信息，如:名称、电话、地址等。
现在我有一个：
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
@Injectable()
export cl
浏览 3提问于2017-09-23得票数 2
回答已采纳
我使用远程服务URL来检索数据并在我的angular 6项目中使用。因为它大多数时候都会产生CORS问题，所以我不得不使用proxy.config.json。配置如下： 在angular.json，inside architect，inside serve中，我给出了一个选项，比如： "proxyConfig":"proxy.config.json" 在proxy.config.json内部， {
"/push/*":{
"target":"https://abc.xyz.blu
浏览 189提问于2019-04-08得票数 0
响应体；
[
{
"professionalId": {
"cib_code": "30003",
"thirdPartyId": "RS30004"
},
"nationalIdentifier": "984538926",
"nationalIdType": "SIREN"
},
{
"professionalId": {
"cib_co
浏览 0提问于2018-02-09得票数 0
我正在尝试从angularjs格式的jsonp错误回调中获取响应消息，但响应数据未定义。我返回了包含409 http代码的响应。如果要在浏览器中直接打开jsonp url，它会显示"angular.callbacks._0({" message ":"Reset link is incorrect"})"，但在错误回调中无法获得此消息。我做错了什么？
// Extend angular app for api requests
app.factory('User', function($http) {
var User
浏览 0提问于2013-01-25得票数 2
回答已采纳
给定JSON端点/api/config，我们尝试在HTML中使用<link rel="prefetch" href="/api/config">。Chrome按预期在HTML中访问链接标记时下载数据，但大约一秒钟后通过脚本再次通过XHR请求数据。
服务器被配置为允许缓存，并在头中使用Cache-Control: "max-age=3600, must-revalidate"进行响应。当Chrome再次请求数据时，服务器将以304未修改的状态正确响应。
用例是:配置端点总是使用XHR从我们的单个页面应用程序中的Javascript请求(
浏览 1提问于2016-07-26得票数 19
回答已采纳
我正在用php后端编写一个Angular2应用程序。当我从向服务器发出请求时，它会在浏览器控制台中向我发送此错误消息。
Unexpected token < in JSON at position 0
我读过一个关于这个问题的问题。他们说问题在于http响应的响应类型。他们说，响应类型应该是json。但是在我的应用程序中，响应类型是text/html。
这是与我的问题相关的service.ts文件user.service.ts
import { Injectable } from '@angular/core';
import {User} from '../mo
浏览 2提问于2017-11-03得票数 0
回答已采纳
1回答
JSON解析中的离子3错误
、、、、
在Ionic中，我在尝试解析JSON数据时得到了这个错误。
Error : Response with status: 0 for URL: null
我需要用列表格式打印产品名称(姜黄粉)。
JSON响应是
[{"product_id":"40","sku":"HOS001","name":"Turmeric Powder","set":"9","type":"configurable","category_ids
浏览 2提问于2017-06-20得票数 1
回答已采纳
我有这个功能可以把经理的名单还给我
function getManagers() {
var jqxhr = $.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: '/webservice.asmx/GetManagers',
dataType: 'json'
浏览 5提问于2012-03-30得票数 1
回答已采纳
我正在调用一个angular组件中的javascript函数。我将JS文件包含在“angular.json”中，它工作得很好。JS函数执行http GET请求并返回数据。问题是我不能告诉Angular等待JS响应然后获取数据。 这是我的JS函数： function getDataJsFunct(id) {
var params = {id:id}
apiClient.getById(params) { console.log('data from JS', result);
return result;
}
} 这是我的TS文件:在api-se
浏览 12提问于2020-04-02得票数 0
我正在处理一个使用Angular5服务的大型dataSet，所以我想调用后端API一次，并希望将结果保存到JSON中。
我获取响应，然后根据需要存储到几个数组中，我正在寻找如何将这些数组添加到JSON文件中。
getAllConcepts(){
let allOrderUUID="b3dac224-fdea-11e4-b248-005056820298";
this.allOrderableService.getAllOrderableConcepts(allOrderUUID).subscribe(allOrders=>{
let allOrderabl
浏览 0提问于2018-12-28得票数 0
XMLHttpRequest无法加载。在飞行前响应中，访问控制允许标头不允许请求标头字段内容类型.
error_handler.js:48异常:状态响应:0表示URL: null
服务器已经支持CORS...but --我仍然能理解这一点。
代码
import {Injectable} from "@angular/core";
import {Http, Headers} from "@angular/http";
import { getUserApi } from "../../../api.config";
@Injectabl
浏览 1提问于2016-10-29得票数 0
我通过服务调用REST API，并使用该服务在根组件中获取响应。因此，现在我在根组件中有了api响应(JSON对象)，并希望在子组件中共享该对象。如何在不再次调用服务情况下使用子组件中的对象？
简而言之，我不想为相同数据多次调用服务器(只调用一次api )，并在整个angular 2应用程序中使用响应。
你能建议我们如何实现这一点吗？
浏览 0提问于2017-11-08得票数 1
1回答
我有一个功能良好的查询，我想调用更多的数据而不使用JOIN来响应
这里是我的查询
$id = $request->getAttribute('id');
$sql = "SELECT *
FROM users
WHERE section = :id";
try {
$db = new db();
$db = $db->connect();
$stmt = $db->prepare($sql);
$stmt->bi
浏览 0提问于2017-09-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
