使用 *ngFor 检索和显示 json 对象

Posted 2023-03-13

【中文标题】使用 *ngFor 检索和显示 json 对象

【英文标题】：retrieving and displaying json object using *ngFor

【发布时间】：2016-08-01 15:36:52

【问题描述】：

我想从 angular2 中的 json 文件中检索信息。为此，我创建了这个自定义管道，遵循示例 How to display json object using *ngFor

import Pipe, PipeTransform from 'angular2/core';

@Pipe(name: 'parseData')


export class ParseDataPipe implements PipeTransform
    constructor()

    transform(value, args:string[]) : any 

       let keys = [];

         for (let key in value) 
            keys.push(
                 key: key,
                 value: value[key]
            );
         
         return keys;

    

这是我在组件中使用的模板：

        <button (click)="onTestGet()">GET REQUEST</button><br>
            <p>getData</p>

        <button (click)="onTestPost()">POST REQUEST</button><br>
            <p>postData</p>

        <span *ngFor="#entry of postData | parseData">
            <ul>
                    <!--<li>Key: entry.key, value: entry.value.status</li>;-->
                    <li>Value: entry.value</li>
            </ul>
        </span>
    </div>

这是我的 json 文件：

"status":"success","type":"cellSetData","data":    "epoch":6874,"cube":"EquityDer","axes":["id":-1,"hierarchies":  ["dimension":"Measures","hierarchy":"Measures"],"positions":  [["namePath":["pnl.SUM"],"captionPath":["pnl.SUM"],"properties":   "DISPLAY_INFO":0]]],"cells":["ordinal":0,"value":-42973.21272120108,"formattedValue":"-42,973.21","properties":],"defaultMembers":["dimension":"Measures","hierarchy":"Measures","path":["contributors.COUNT"],"captionPath":["Count"],"dimension":"Time","hierarchy":"HistoricalDates","path":["Mon Apr 11 02:00:00 CEST 2016"],"captionPath":["2016-04-11"],"dimension":"Epoch","hierarchy":"Epoch","path":["master"],"captionPath":["master"]]

我想检索例如“状态”和“类型”，但我检索的字符数组是这样的：

值： 价值： ” 值：s 值：吨 值：一个 值：吨 值：u 值：s 价值： ” 价值： ： 价值： ” 值：s 值：u 值：c 值：c 值：e 值：s 值：s 价值： ” 价值： ， 价值： ” ...

我像这样解析我检索到的对象：

postJSON()
          var param=JSON.stringify(
            "mdx":"SELECT FROM [EquityDerivativesCube] WHERE ([Measures].[pnl.SUM])"
          );

          var firstheaders = new  Headers();

          firstheaders.append('Content-Type', 'application/json');
          firstheaders.append('Authorization', 'Basic YWRtaW46YWRtaW4=');

        return this._http
            .post('http://localhost:9090/webservices/pivot/rest/v1/cube/query/mdx', param,headers: firstheaders)
            .map(res => res.json());

    

有谁知道我为什么要检索字符数组而不是我想要的字符串数组？ 我想指定我遵循这些示例：access key and value of object using *ngFor Deep nested json to array in array / json rendering of Angular 2 *ngFor

我觉得不是解析json的问题，而是检索出来显示...

谢谢你帮助我

【参考方案1】：

我不知道如何获取数据，但您似乎忘记解析它们（即将其转换为 JSON 对象），因为您迭代的是字符串而不是对象。

在您的循环中，第一个元素是 内容的第一个字符，第二个元素是"，依此类推...

要加载你的 JSON 文件，你应该使用类似的东西：

this.http.get('/myfile.json').map(res => res.json());

【讨论】：

谢谢蒂埃里，但是关于你之前的问题，你是否从你的 json 中正确检索了数据？这也是我想做的事情

您能提供您的回复内容吗？特别是 Content-Type 标头。谢谢！

在此处和底部查看我的回复的 Content-Type：firstheaders.append('Content-Type', 'application/json'); firstheaders.append('授权', '基本 YWRtaW46YWRtaW4=');

这是您为请求添加的标头？响应的标头可以在“网络”选项卡的开发工具中看到...

是的，它们是我为请求而放置的标头。 Content-Type 响应相同：application/json