TypeScriptで内部オブジェクトプロパティを配列に変更する

user10990607

そのような問題がありました、私は数日間苦しんでいます、私はまだかなりの初心者です。

ウィキペディアAPIへのGETリクエストを使用して、このオブジェクトを取得します

pagesオブジェクトの場合、プロパティの名前(これもオブジェクトです)は常にpageid(この場合は「9475」)と同じであることがわかります。オブジェクトの名前が事前にわからない場合、どうすればこのオブジェクトにアクセスできますか?

次に、ngForを使用できるように、このオブジェクトを配列に変換する必要があります。

search.component.tsのshowArticleInformationメソッドを使用して取得したこのオブジェクト

search.component.ts

import { Component, OnInit } from '@angular/core';
import { Article, ArticleInformation, ArticlesService } from '../../services/articles.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css'],
  providers: [ArticlesService]
})

export class SearchComponent implements OnInit {
  constructor(private articlesServices: ArticlesService) { }

  searchQuery: string;

  articles: { };
  articleInformation: ArticleInformation;

  getUrl(searchQuery: string) {
    return 'https://ru.wikipedia.org/w/api.php?action=opensearch&profile=strict&search='
      + searchQuery + '&limit=100&namespace=0&format=json&origin=*';
  }

  getUrlInformation(searchQuery: string) {
    return 'https://ru.wikipedia.org/w/api.php?action=query&titles='
      + searchQuery + '&prop=info&format=json&origin=*';
  }

  showArticles() {
    this.articlesServices.getArticles(this.getUrl(this.searchQuery))
      .subscribe(
        (data: Article) => this.articles = Object.values({ ...data })
      );
  }

  showArticleInformation() {
    this.articlesServices.getArticleInformation(this.getUrlInformation(this.searchQuery))
      .subscribe(
        (data: ArticleInformation) => this.articleInformation = { ...data }
      );
    console.log(this.articleInformation);
  }

  ngOnInit() {
  }
}

articles.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { retry } from 'rxjs/operators';

export interface Article {
  title: string;
  collection: string[];
  description: string[];
  links: string[];
}

export interface ArticleInformation {
  batchComplete: string;
  query: {
    pages: { }
  };
}

@Injectable({
  providedIn: 'root'
})

export class ArticlesService {
  constructor(private http: HttpClient) { }

  getArticles(url) {
    return this.http.get<Article>(url)
      .pipe(
        retry(3),
      );
  }

  getArticleInformation(url) {
    return this.http.get<ArticleInformation>(url)
      .pipe(
        retry(3),
      );
  }
}
君は

あなたが特定のならそれはpages、常に1つの特性を持つことになりますし、あなたはそれが唯一の必要value、あなたが使用して、このような何かを行うことができますObject.values

const data = {
  batchComplete: "",
  query: {
    pages: {
      "9745": {
        pageid: 9745,
        length: 48,
        lastrevid: 100,
        contentmodel: "wikitext",
        touched: "2019-02-01"
      }
    }
  }
}

const articleInformation = {
  ...data,
  query: {
    pages: [Object.values(data.query.pages)[0]]
  }
}

console.log(articleInformation)

ただし、構造が異なるinterfaceためthis.articleInformation、とは別々にする必要がありますdata

このようなもの:

export interface ArticleInformationNew {
  batchComplete: string;
  query: {
    pages: any[]
  };
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

オブジェクトの配列のオブジェクトプロパティを変更する

分類Dev

配列にオブジェクトを追加し、その配列内の他のオブジェクトのプロパティを変更する

分類Dev

動的プロパティに基づいてオブジェクト値の配列を変更する

分類Dev

typescriptで配列の各オブジェクトにプロパティを追加する方法。

分類Dev

新しい配列に追加する前にオブジェクトのプロパティを変更するにはどうすればよいですか?

分類Dev

新しい配列に追加する前にオブジェクトのプロパティを変更するにはどうすればよいですか?

分類Dev

配列オブジェクトのプロパティを変更する方法をフックします。

分類Dev

オブジェクトのプロパティを破壊es6で配列に変換する方法

分類Dev

javascriptで配列内のオブジェクトのプロパティの名前を変更するにはどうすればよいですか?

分類Dev

typescriptの変数でオブジェクトプロパティを変更する

分類Dev

オブジェクトの配列を反復処理し、reduxのプロパティを変更するにはどうすればよいですか?

分類Dev

ramdaを使用してオブジェクトの配列のプロパティを変更する

分類Dev

オブジェクトの配列をプロパティの配列に変換する

分類Dev

JavaScript:配列内のオブジェクトのプロパティ名を変更するにはどうすればよいですか?

分類Dev

配列javascript(React Native)のオブジェクトのプロパティを変更する方法

分類Dev

オブジェクトの配列のプロパティを変更する方法

分類Dev

TypeScriptで追加のプロパティを使用して配列オブジェクトを初期化する方法は?

分類Dev

オブジェクト自体を変更せずに、オブジェクトの配列プロパティをフィルタリングします

分類Dev

JavaScriptでオブジェクトプロパティを複数のオブジェクト配列に変換する

分類Dev

オブジェクトのプロパティを動的に変更する

分類Dev

JSONオブジェクトでオブジェクトのプロパティ値を変更する方法

分類Dev

オブジェクトの配列にプロパティを追加する

分類Dev

Angularjsのオブジェクトに配列プロパティを追加する

分類Dev

オブジェクトの配列を配列からオブジェクトのオブジェクトプロパティに変換します

分類Dev

元の配列を変更せずに、配列内のオブジェクトプロパティを変更します

分類Dev

新しい着信オブジェクトから変更されていない元のオブジェクトのプロパティを保持するオブジェクトの配列からマージされたオブジェクトを作成するにはどうすればよいですか?

分類Dev

オブジェクトの配列をプリミティブの配列に変換します(オブジェクトのプロパティから抽出)

分類Dev

配列値をオブジェクトプロパティとして動的に変換する

分類Dev

JavaScriptオブジェクトの内部[[Class]]プロパティを変更する方法はありますか?

Related 関連記事

  1. 1

    オブジェクトの配列のオブジェクトプロパティを変更する

  2. 2

    配列にオブジェクトを追加し、その配列内の他のオブジェクトのプロパティを変更する

  3. 3

    動的プロパティに基づいてオブジェクト値の配列を変更する

  4. 4

    typescriptで配列の各オブジェクトにプロパティを追加する方法。

  5. 5

    新しい配列に追加する前にオブジェクトのプロパティを変更するにはどうすればよいですか?

  6. 6

    新しい配列に追加する前にオブジェクトのプロパティを変更するにはどうすればよいですか?

  7. 7

    配列オブジェクトのプロパティを変更する方法をフックします。

  8. 8

    オブジェクトのプロパティを破壊es6で配列に変換する方法

  9. 9

    javascriptで配列内のオブジェクトのプロパティの名前を変更するにはどうすればよいですか?

  10. 10

    typescriptの変数でオブジェクトプロパティを変更する

  11. 11

    オブジェクトの配列を反復処理し、reduxのプロパティを変更するにはどうすればよいですか?

  12. 12

    ramdaを使用してオブジェクトの配列のプロパティを変更する

  13. 13

    オブジェクトの配列をプロパティの配列に変換する

  14. 14

    JavaScript:配列内のオブジェクトのプロパティ名を変更するにはどうすればよいですか?

  15. 15

    配列javascript(React Native)のオブジェクトのプロパティを変更する方法

  16. 16

    オブジェクトの配列のプロパティを変更する方法

  17. 17

    TypeScriptで追加のプロパティを使用して配列オブジェクトを初期化する方法は?

  18. 18

    オブジェクト自体を変更せずに、オブジェクトの配列プロパティをフィルタリングします

  19. 19

    JavaScriptでオブジェクトプロパティを複数のオブジェクト配列に変換する

  20. 20

    オブジェクトのプロパティを動的に変更する

  21. 21

    JSONオブジェクトでオブジェクトのプロパティ値を変更する方法

  22. 22

    オブジェクトの配列にプロパティを追加する

  23. 23

    Angularjsのオブジェクトに配列プロパティを追加する

  24. 24

    オブジェクトの配列を配列からオブジェクトのオブジェクトプロパティに変換します

  25. 25

    元の配列を変更せずに、配列内のオブジェクトプロパティを変更します

  26. 26

    新しい着信オブジェクトから変更されていない元のオブジェクトのプロパティを保持するオブジェクトの配列からマージされたオブジェクトを作成するにはどうすればよいですか?

  27. 27

    オブジェクトの配列をプリミティブの配列に変換します(オブジェクトのプロパティから抽出)

  28. 28

    配列値をオブジェクトプロパティとして動的に変換する

  29. 29

    JavaScriptオブジェクトの内部[[Class]]プロパティを変更する方法はありますか?

ホットタグ

アーカイブ