我一直在努力解析和使用从 JSON 查询/api 调用返回的数据。我不确定我到底哪里出错了,我觉得我已经盘旋了好几天的答案,追逐各种错误代码,例如:
“找不到'iterableDiff'管道支持对象”
“通用类型数组需要一个参数”
JSON 解析错误,我确定其他人
我假设我只是有错误的修复组合。
所以这里有一些陷阱和要寻找的东西的摘要。
首先检查你的api调用的结果,你的结果可能是对象、数组或对象数组的形式。
我不会过多介绍它,我只想说 OP 的原始错误不可迭代通常是由于您尝试迭代对象而不是数组引起的。
Heres some of my debugging results showing variables of both arrays and objects
因此,由于我们通常希望遍历 JSON 结果,我们需要确保它是数组的形式。我尝试了许多示例,也许知道我现在知道的其中一些实际上会起作用,但是我采用的方法确实是实现管道,而我使用的代码是 t.888 发布的
transform(obj: {[key: string]: any}, arg: string) {
if (!obj)
return undefined;
return arg === 'keyval' ?
Object.keys(obj).map((key) => ({ 'key': key, 'value': obj[key] })) :
arg === 'key' ?
Object.keys(obj) :
arg === 'value' ?
Object.keys(obj).map(key => obj[key]) :
null;
老实说,我认为让我失望的一件事是缺乏错误处理,通过添加“返回未定义”调用,我相信我们现在允许将非预期数据发送到管道,这显然正在发生就我而言。
如果您不想处理管道的参数(并且看起来我认为在大多数情况下没有必要),您可以返回以下内容
if (!obj)
return undefined;
return Object.keys(obj);
关于创建管道和使用该管道的页面或组件的一些注意事项
我是否收到关于“name_of_my_pipe”未找到的错误
使用 CLI 中的“ionic generate pipe”命令确保正确创建和引用管道 modules.ts。确保将以下内容添加到 mypage.module.ts 页面。
import { PipesModule } from ‘…/…/pipes/pipes.module’;
(如果您也有自己的 custom_module,不确定这是否会改变,您可能还需要将其添加到 custommodule.module.ts)
如果您使用“ionic generate page”命令创建页面,但决定将该页面用作主页,请记住从 app.module.ts 中删除页面引用(这是我发布的另一个答案) https://forum.ionicframework.com/t/solved-pipe-not-found-in-custom-component/95179/13?u=dreaser
在我寻找答案的过程中,有多种方法可以在 html 文件中显示数据,但我理解的不够充分,无法解释这些差异。您可能会发现在某些情况下使用一个比另一个更好。
<ion-item *ngFor="let myPost of posts">
<img src="https://somwhereOnTheInternet/{{myPost.ImageUrl}}"/>
<img src="https://somwhereOnTheInternet/{{posts[myPost].ImageUrl}}"/>
<img [src]="'https://somwhereOnTheInternet/' + myPost.ImageUrl" />
</ion-item>
但是,让我同时显示值和键的有效方法如下:
<ion-list>
<ion-item *ngFor="let myPost of posts | name_of_pip:'optional_Str_Varible'">
<h2>Key Value = {{posts[myPost]}}
<h2>Key Name = {{myPost}} </h2>
</ion-item>
</ion-list>
要进行 API 调用,您需要将 HttpModule 导入 app.module.ts
import { HttpModule } from '@angular/http';
.
.
imports: [
BrowserModule,
HttpModule,
并且你需要在你发出调用的页面中使用 Http
import {Http} from '@angular/http';
在进行 API 调用时,您似乎可以通过 2 种不同的方式获取子数据(数组中的对象或数组)
通话期间
this.http.get('https://SomeWebsiteWithAPI').map(res => res.json().anyChildren.OrSubChildren).subscribe(
myData => {
或者当你将数据分配给你的局部变量时
posts: Array<String>;
this.posts = myData['anyChildren'];
(不确定该变量是否需要是一个数组字符串,但这就是我现在拥有的。它可以作为一个更通用的变量)
最后一点,没有必要使用内置的 JSON 库
但是,您可能会发现这 2 个调用很方便将对象转换为字符串,反之亦然
var stringifiedData = JSON.stringify(this.movies);
console.log("**mResults in Stringify");
console.log(stringifiedData);
var mResults = JSON.parse(<string>stringifiedData);
console.log("**mResults in a JSON");
console.log(mResults);
我希望这个信息汇编对某人有所帮助。