Changing an inner object property to an array in TypeScript

问题

There was such a problem, I have been suffering for a couple of days, I am still quite a novice.

Using the GET request to the Wikipedia API, I get this object

It turns out that for the pages object, the name of the property (which is also an object) is always equal to pageid (in this case "9475"). How can I get access to this object if I don’t know in advance what name it will have?

Then this object must be converted to an array so that ngFor can be used.

This object I get using the showArticleInformation method in search.component.ts

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),
      );
  }
}

回答1:

If you're certain that pages will always have one property and you need only it's value, you could do something like this using 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)

But, you need to have a separate interface for this.articleInformation and data since they have different structures.

Something like this:

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

来源：https://stackoverflow.com/questions/54500727/changing-an-inner-object-property-to-an-array-in-typescript

标签

javascript

angular

typescript

wikipedia-api