@08302025posted at 2025-06-20

選択したプルダウンを選んだ時に、対象の情報を取ってくる処理

Q&A

プルダウンで500000円以下、500000円以上-1000000円以下、1000000円以上2000000円以下、これが10000000円まであり、10000000円以上なら、10000000 円以上と表記のでるプルダウンがある。
選択したプルダウンの金額に応じて対象の商品を取ってくる処理を教えていただきたい。

angular➕Node.js、postgresを使用しています。

情報不足だと思うのでわからないことあれば質問いただけると幸いです。

html
                <mat-select formControlName="amount" (selectionChange)="oSelectionChange($event)">
                <mat-option value=""></mat-option>
                <mat-option *ngFor="let option of amount" [value]="option.value">
                  {{ option.value | translate }}

template

public amountOptions: Option[];

server

if (body.amount?.length > 0) {
      const conditions = [
        { amount: '<= :limit1', params: { limit1: 500000 } },
        {
          Amount: 'BETWEEN :minLimit2 AND :maxLimit2',
          params: { minLimit2: 500000, maxLimit2: 1000000 },
        },

conditions.forEach((condition, index) => {
        const method = index === 0 ? 'andWhere' : 'orWhere';
        query[method](`product.amount ${condition.amount}`, condition.params);
      });
    }

0 likes

5Answer

@SurferOnWww posted at 2025-06-20

自分ではどこまで実装できていて、どこで躓いていて、何が分かれば解決できるかを、自分が書いたコードをアップするなどして質問欄に追加情報として書いてください。

1Like

@oh_jig posted at 2025-06-20

こんな感じですかね？
商品一覧は適当に作っているので、この部分を本物に差し替えたらいいと思いますよ。

src/app/merchandise/merchandise.component.ts

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { NgForOf, NgIf } from '@angular/common';

@Component({
  selector: 'app-merchandise',
  imports: [ReactiveFormsModule, NgForOf, NgIf],
  templateUrl: './merchandise.component.html',
  styleUrl: './merchandise.component.css',
})
export class MerchandiseComponent {
  readonly budgets: Budget[] = [
    { value: 0, name: '' },
    { value: 5000000000, name: '500000万円以下' },
    { value: 10000000000, name: '1000000万円以下' },
    { value: 2000000, name: '2000000円以下' },
  ];
  readonly allMerchandises: Merchandise[] = [
    { id: 1, name: '商品1', price: 10000 },
    { id: 2, name: '商品2', price: 100000 },
    { id: 3, name: '商品3', price: 1000000 },
    { id: 4, name: '商品4', price: 10000000 },
    { id: 5, name: '商品5', price: 100000000 },
    { id: 6, name: '商品6', price: 1000000000 },
    { id: 7, name: '商品7', price: 10000000000 },
    { id: 8, name: '商品8', price: 100000000000 },
    { id: 9, name: '商品9', price: 1000000000000 },
  ];
  readonly selectedBudgetControl = new FormControl(this.budgets[0]);
  readonly selectedMerchandiseControl = new FormControl();
  merchandises: Merchandise[] = [];
  selectedIndex: number = -1;
  onBudgetSelect(): void {
    const budget: Budget = this.selectedBudgetControl.value ?? this.budgets[0];
    this.merchandises = this.allMerchandises.filter(
      (item) => item.price <= budget.value
    );
    this.selectedMerchandiseControl.setValue(null);
    this.selectedIndex = -1;
  }
  onMerchandiseSelect(): void {
    const id: number | undefined = this.selectedMerchandiseControl.value?.id;
    this.selectedIndex =
      id === undefined
        ? -1
        : this.merchandises.findIndex((item) => item.id === id);
  }
}

type Budget = {
  value: number;
  name: string;
};

type Merchandise = {
  id: number;
  name: string;
  price: number;
};

src/app/merchandise/merchandise.component.html

<h2>商品</h2>
<form id="merchandise">
  <select id="budgets" [formControl]="selectedBudgetControl" (change)="onBudgetSelect()">
    <option *ngFor="let budget of budgets" [ngValue]="budget">{{ budget.name }}</option>
  </select><br>

  <select id="merchandises" [formControl]="selectedMerchandiseControl" (change)="onMerchandiseSelect()" size="10">
    <option *ngFor="let merchandise of merchandises" [ngValue]="merchandise">{{merchandise.name}}</option>
  </select>

  <div id="showitem" *ngIf="selectedIndex >= 0 && selectedIndex < merchandises.length">
    <dl>
      <dt>ID</dt><dd>{{merchandises[selectedIndex].id}}</dd>
      <dt>name</dt><dd>{{merchandises[selectedIndex].name}}</dd>
      <dt>price</dt><dd>{{merchandises[selectedIndex].price}}</dd>
    </dl>
  </div>
</form>

0Like

@08302025 posted at 2025-06-20

HTMLの検索ボタンを押下するとTypeScriptに記載のある処理に移行する。その後controller内にあるserver側に処理が移り、後にservice内にあるsql文を実行することになる。その際はどのような処理になるのかお伺いしたいです。かなりざっくりした質問になってしまいますがご回答いただけると幸いです。以下ChatGPTに処理を考えさせたのですがこのような作りになっています。

検索
↓
onSearch(): void {
this.http.get('/api/search?keyword=example').subscribe(response => {
this.results = response;
});
}
↓
@Get('search')
search(@Query('keyword') keyword: string): Promise {
return this.searchService.searchKeyword(keyword);
}
↓←具体的にここでSQLを打ちたい
async searchKeyword(keyword: string): Promise {
return this.searchRepository.findByKeyword(keyword);
}
↓
async findByKeyword(keyword: string): Promise {
return this.dataSource.query(
'SELECT * FROM items WHERE name LIKE ?', [%${keyword}%]
);
}

0Like

Comments

@SurferOnWww
質問欄は編集できます。上記は追加情報として最初のあなたの質問に追記してください。質問者が回答欄に書くと質問と回答がゴッチャになって訳が分からなくなりがちなので。
@uasi
ChatGPT を使っているなら、「質問サイトで自作プログラムについて質問をしたいが、以下の文章で伝わるか？不足している情報はあるか？」などと聞いて推敲した上で貼ったほうがいいですよ。

@Verclene posted at 2025-06-20

その際はどのような処理になるのかお伺いしたいです。

何をしたいのかも何が分からないのかも具体的に分からないから何も答えようがないというのが正直なところ.
データのやり取りの方法が分からないという話なら適当にJSONを返してやってくださいの一言に尽きます.レスポンスの返し方はそれこそドキュメント読め .

まずちゃんと作りたいものの設計してますか?そうじゃないと不明点は特定できませんぞ.

0Like

@oh_jig posted at 2025-06-23

ChatGPTが教えてくれている通りで問題ないですよ。
SQLQueryを実際のデータベースに合わせたものに変えれば、それで動くと思いますよ。

0Like

Are you sure you want to delete the question?

選択したプルダウンを選んだ時に、対象の情報を取ってくる処理

5Answer

Comments

Your answer might help someone💌