Access information from an http URL using AngularJS

Question

Access information from an http URL using AngularJS

Attempting to create an Angular application that showcases all of Google's public repositories on GitHub (https://github.com/google). I've successfully displayed a portion of it using the angular-in-memory-web-api:

export class InMemoryDataService implements InMemoryDbService{
  createDb() {
    const repos = [
      { id: 143044068, name: '0x0g-2018-badge' },
   ...
      { id: 88582010, name: 'address-geocoder-js' },
    ];
    return {repos};
  }
  genId(repos: Repo[]): number {
    return repos.length > 0 ? Math.max(...repos.map(repo => repo.id)) + 1 : 11;
  }
}

I have used the GitHub API to fetch the repositories from the first page.

Is there a method to retrieve all the repositories by utilizing the link ( in my case) instead of manually entering the entire database into my createDb() function?

angular typescript

Answer 1

Answer №1

To gather data from a website, utilize the text() method to extract page content, then convert it into an array of objects by employing forEach loop for selecting the necessary properties:

  ngOnInit(){
    this.fetchDataFromURL();
  }

  async fetchDataFromURL() {
    let url = 'https://api.example.com/products?page=1';
    let products = [];
    const htmlContent = await (await fetch(url)).text();
    let parsedData = JSON.parse(htmlContent);
    parsedData.forEach((product) => {
      products.push({ id: product.id, name: product.name });
    });
    console.log(products);
  }

Answer 2

To gather data from a website, utilize the text() method to extract page content, then convert it into an array of objects by employing forEach loop for selecting the necessary properties:

  ngOnInit(){
    this.fetchDataFromURL();
  }

  async fetchDataFromURL() {
    let url = 'https://api.example.com/products?page=1';
    let products = [];
    const htmlContent = await (await fetch(url)).text();
    let parsedData = JSON.parse(htmlContent);
    parsedData.forEach((product) => {
      products.push({ id: product.id, name: product.name });
    });
    console.log(products);
  }

Access information from an http URL using AngularJS

Answer №1

Similar questions

Error: The variable _ is undefined when trying to use the .map() function on an array

ArcGIS JavaScript API was unable to display weather information on the map

The typings for object properties in Typescript

What is the best way to update a component in real time from another component?

Angular with RxJS: Observable with synchronous data flow

Imitate a HTTP request

Utilize the canActivate method to decide when to display a specific hyperlink

When onSubmit is triggered, FormData is accessible. But when trying to pass it to the server action, it sometimes ends up as null

What is the best way to prevent routing to <a href="#" > in Angular 8?

What could be causing the issue: Unable to locate or read the file: ./styles-variables?

Retrieving input values using alert-controller in Typescript for Ionic framework and Angular

Limit function parameter types to object keys

Leveraging TypeScript to share information between directives in AngularJS through asynchronous calls

Encountering an ERROR of TypeError when attempting to access the property 'length'

Using Angular: How to set the index value from a dropdown to a local variable after a button is clicked

Ways to avoid Next.js from creating a singleton class/object multiple times

An instance of an object is being added instead of parameters

What is the best way to clear the parent component's content from the child component in Angular?

Navigating on button click in Angular 5

What is the correct way to specify the data type for the useState hook when I intend to store an array of objects?