Is it possible to bind an http post response to a dropdown list in Angular?

My goal is to connect my post response with a dropdown list, but the text displayed in the drop-down box shows "[object Object]". My request returns two results - `ArticleID` and `Title`. I want to display `Title` in the dropdown and save the corresponding `ArticleID` in a variable for future use. It's possible that my approach is incorrect, and I'm feeling lost.

JSON Post Response

{
  ArticleID:1
  Title: Raven,
  ArticleID:4
  Title: sam,

} 

app.component.ts

     ngOnInit() {
      this.searchField.valueChanges

       .pipe(
          debounceTime(5000),
          distinctUntilChanged(),
          map((val) => {
               this.http.post<any>('http://localhost:3000/articles/articleslistData', { pubid: '3',pubdate: "2021-01-13" }).subscribe({
                next: data => {
                   console.log(data);

                },
                error: error => {
                    this.errorMessage = error.message;
                    console.error('There was an error!', error);
                }
            })
          })
      )
      .subscribe();
} 

app.component.html

<div class="form-field col-lg-12">
<label class="label" for="message">Headline</label>
<input id="message" class="input-text js-input" type="text" *ngFor="let Article of ArticleList  
[value]="user.clientCode" [formControl]="searchField"> 
{{Article.Title}}
</div> 

Answer №1

For your answer to be correct, it should take the form of an array:

const choices = [{
  ID:1
  Name: Tiger
},{
  ID:4
  Name: Lion,
}]

After that, you can loop through the array and display it as dropdown options:

<select>
  <option *ngFor="let option of choices" [value]="option.ID">{{option.Name}}</option>
</select>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to showcase an image with Angular 2?

Just starting out with Angular 2 and ran into an issue while trying to display an image using a relative path. <img src="./../images/publicVideo1.PNG"> Unfortunately, I encountered the following error: null:1 GET http://localhost:4200/null 404 (No ...

What should be done in the absence of any subscriptions?

Incorporating a generic HTTP service to encapsulate certain HTTP behaviors is part of our system. In case of an error, we include the error in a BehaviorSubject. I am contemplating on whether there is a method to display this error only if no one is subsc ...

Why are traditional Angular dependencies still necessary even when typedefinitions are being used?

I am currently in the process of transitioning my Angular 1.5 project to use TypeScript. The project is compiled with webpack and even though I have included Angular type definitions in my package.json file as shown below, "@types/angular": "~1.5.19", "@t ...

When executed through nodeJS using the `require('./main.ts')` command, TypeScript Express encountered an issue with exporting and displayed undefined

Describing my issue is proving to be challenging, so I have simplified the code. Let me share the code below: main.ts import express from 'express'; let a = 1 console.log ('a in main.ts', a) export let b = a const app = express() let ...

Warning message regarding unhandled promise rejection in NestJS websockets

I've encountered a puzzling issue while attempting to integrate an 'events' module into my application to utilize websockets. Upon adding the module, an unexpected error surfaced: (node:59905) UnhandledPromiseRejectionWarning: Unhandled pro ...

What are some ways to streamline inline styling without having to create numerous variables?

Currently, I am in the process of constructing a tab component and establishing inline variables for CSS styling. This particular project involves a streamlit app that allows me to modify settings on the Python side. At the moment, there are four elements ...

What is the best way to incorporate an image into the canvas element and then use it as a drawing surface?

I have been searching for solutions on various platforms, but I'm having trouble finding ones that work specifically with Ionic and Angular. One major issue I'm facing is trying to copy an image to the canvas. No matter what I try, I can't ...

Why does Angular2 Router3 not call the Parent Route's Guard every time I navigate between its child routes?

My parent route has a Guard that should be called whenever navigating between child routes. However, I'm facing an issue where the Guard is only triggered when the first child is loaded and not on subsequent switches to other children within the same ...

Contrast between the node modules "highcharts-angular" and "angular-highcharts" for Angular version 7

In my upcoming Angular v7 application using the latest version of Highcharts, I have encountered two similar node modules listed on the HighCharts tutorial page. However, I'm unsure of the differences between them: Node module: highcharts-angular No ...

Error message: An unhandled TypeError occurs when attempting to access properties of an undefined object (specifically, the 'then' property) while refreshing the token using axios

Is there a way to refresh tokens in axios without interrupting the flow? For example, when the server returns an access token expiration error, I want to queue the request and replay it after getting a new token. In React, I'm using promises as shown ...

Extending Two Classes in Typescript: A Complete Guide

I am looking for a way to efficiently save time by reusing common code across classes that extend PIXI classes within a 2D WebGL renderer library. Object Interfaces: module Game.Core { export interface IObject {} export interface IManagedObject e ...

Place the Div in a consistent position on images of varying widths

I have a dilemma with my class that is supposed to display images. The issue arises when I try to place a div within an image inside this class. Everything works smoothly when the image takes up the entire width of the class, but as soon as the image widt ...

Go through each subscriber

I'm struggling to grasp the concept of the observer/subscriber model and how to iterate through the returned data. For example, I have a cocktail component that fetches an array of cocktail objects. The key part of cocktail.service.ts: constructor( ...

Getting TypeScript errors when incorporating a variant into a Material-UI button using a custom component

I have created a unique Link component inspired by this particular example. Take a look at the code below: import classNames from 'classnames'; import {forwardRef} from 'react'; import MuiLink, {LinkProps as MuiLinkProps} from '@ma ...

Is ts-node necessary for using TypeScript in Node.js?

Having trouble setting up a Node.js application in Visual Studio Code using TypeScript due to issues with importing modules. Initially, I created an index.ts file with the import statement -> import config from './app/config.json'; This resu ...

TypeScript Color Definitions in React Native

I'm working on a component that requires users to pass only valid color values using TypeScript type checking in a React Native project. How can I achieve this and which types should I use? const TextBody = ({ color }: {color: //Need This}) => { ...

Is there a way to simulate the BeforeInstallPromptEvent for testing in Jasmine/Angular?

I'm currently working on testing a dialog component that manages the PWA install event triggered manually when a specific function is invoked. The goal is to handle the promise returned by the BeforeInstallPromptEvent.userChoice property. However, wh ...

Tips for creating spacing between an image and a button when utilizing the routerLink feature in CSS

To enhance the user interface, I've utilized a routerLink with an image to navigate back to the home page, and a button to direct users to add a new customer. Now, I am aiming to create some space between these elements. Previously, I used "& ...

One of the interfaces in use is malfunctioning, despite being identical to the other interface in TypeScript

I have been working on the IDocumentFilingDto.ts file. import { DocumentOrigin } from "./IDocumentFilingDto"; export interface IDocumentFilingDtoGen { UniqueId?: any; Title?: string; DocumentId?: string; Binder?: any; Communi ...

Passing data to a child component using Context in React is not working

I have a parent component where I am storing data in an array of objects and then passing it to another component through Context. Here is how my parent component looks: export type HistoryData = { input: string; date: string; ...