Flickrで複数の検索テキストを表示させる方法

Question

現在、Web APIの勉強をしており、Flickrを使用して画像を出す方法について困っています。

同じ所に、例えば「犬」と「猫」を5枚づつ表示させるにはどうしたらいいのか分からず困っています。
「text」に['cat'&'dog']や['cat&dog']や['cat,dog']など色々試したのですがイメージのように表示されません。
例として下記のようにコードを書きましたので、分かりやすくご教授のほどよろしくお願い致します。

Flickrで画像を保存して表示ではなく、「text」を使用して表示させたいです。

よろしくお願い致します。

// Flickr API key
const apiKey = '//個人のAPIのKey';

// Flickr画像データのURLを返す
const getFlickrImageURL = (photo, size) => {
  let url = `https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${
    photo.secret
  }`;
  if (size) {
    // サイズ指定ありの場合
    url += `_${size}`;
  }
  url += '.jpg';
  return url;
};

// Flickr画像の元ページのURLを返す
const getFlickrPageURL = photo => `https://www.flickr.com/photos/${photo.owner}/${photo.id}`;

// Flickr画像のaltテキストを返す
const getFlickrText = (photo) => {
  let text = `"${photo.title}" by ${photo.ownername}`;
  if (photo.license === '4') {
    // Creative Commons Attribution（CC BY）ライセンス
    text += ' / CC BY';
  }
  return text;
};

// リクエストパラメータを作る
const parameters = $.param({
  method: 'flickr.photos.search',
  api_key: apiKey,
  text: 'cat', // 検索テキスト
  sort: 'interestingness-desc', // 興味深さ順
  per_page: 5, // 取得件数
  license: '4', // Creative Commons Attributionのみ
  extras: 'owner_name,license', // 追加で取得する情報
  format: 'json', // レスポンスをJSON形式に
  nojsoncallback: 1, // レスポンスの先頭に関数呼び出しを含めない
});
const url = `https://api.flickr.com/services/rest/?${parameters}`;
console.log(url);

// 猫の画像を検索して表示
$.getJSON(url, (data) => {
  console.log(data);

  // データが取得できなかった場合
  if (data.stat !== 'ok') {
    console.error('データの取得に失敗しました。');
    return;
  }

  // 空の<div>を作る
  const $div = $('<div>');

  // ヒット件数
  $div.append(`<div>${data.photos.total} photos in total</div>`);

  for (let i = 0; i < data.photos.photo.length; i++) {
    const photo = data.photos.photo[i];
    const photoText = getFlickrText(photo);

    // $divに <a href="..." ...><img src="..." ...></a> を追加する
    $div.append(
      $('<a>', {
        href: getFlickrPageURL(photo),
        class: 'd-inline-block',
        target: '_blank', // リンクを新規タブで開く
        'data-toggle': 'tooltip',
        'data-placement': 'bottom',
        title: photoText,
      }).append(
        $('<img>', {
          src: getFlickrImageURL(photo, 'q'),
          width: 150,
          height: 150,
          alt: photoText,
        }),
      ),
    );
  }
  // $divを#mainに追加する
  $div.appendTo('#main');

  // BootstrapのTooltipを適用
  $('[data-toggle="tooltip"]').tooltip();
});

Answer 1

変数を２つつくって、例えば、犬の画像、猫の画像ってやるみたいですよ。
多分shoki1225さんと僕は、同じオンラインコースをやってるっぽいですね。
お互い、頑張りましょう。

// リクエストパラメータを作る
const parametersdog = $.param({

...

// リクエストパラメータを作る
const parameterscat = $.param({
...

Answer 2

スマホからなので簡単に。あとドキュメント読んだだけで試して無いです。

1.単にdog5枚とcat5枚を分けてsearchするだけでは？

2.textでは複数キーワードでの検索は出来ないそうで、tagsとtag_modeを使ってねと言うことらしい。複数タグ指定したときでも、dogとcatが指定枚数づつ出るとは限らないと思う。
https://www.flickr.com/groups/51035612836@N01/discuss/72157692623543064/

https://www.flickr.com/services/api/flickr.photos.search.html

例として下記のようにコードを書きましたので、分かりやすくご教授のほどよろしくお願い致します。

ところで質問に書いてあるコードは何をしているのか理解してます？