AjaxでAPIにアクセスし、得られたJSONをTABLEに埋め込む

やりたいこと

自作した複数のAPIへHTML（JavaScript）から動的にアクセスし、APIから受け取った値（JSON）を、HTMLの好きな場所へ格納したくなったので、その実装のメモ

ポイント：

• 複数のAPIへアクセスしたい。
• 受け取った値をHTMLの任意の場所（たとえばTABLE内とか）に配置したい
• コードは汚いので参考程度にどうぞ

コード

AjaxでAPIにアクセスする「JavaScript部分」と実際に表示する「HTML部分」に分かれています。

JavaScript部分

ポイント：

• 一つの<scrip>~</script>内で書くほうが無難
• APIごとにajaxで読み込み、必要なデータを整形しておく
• appendToなどでIDやClassに値を格納する。格納先が重複しないように注意。

<script>
var setArea1 = $('#logo1'),
setArea2 = $('#price1');
$.ajax({
    url: 'APIのURLその１',
    dataType: 'json',
    success: function(data){
    var OUT1 =`<a href="${data.link}" target="_blank">`,
    OUT2 = `<a href="${data.link}" target="_blank">${data.price}<br>${data.point}</a>`;
    $(OUT1).appendTo(setArea1);
    $(OUT2).appendTo(setArea2);
    }
});
var setArea3 = $('#logo2'),
setArea4 = $('#price2');
$.ajax({
    url: 'APIのURLその2',
    dataType: 'json',
    success: function(data){
    var OUT3 =`<a href="${data.link}" target="_blank">`,
    OUT4 = `<a href="${data.link}" target="_blank">${data.price}<br>${data.point}</a>`;
    $(OUT_d1).appendTo(setArea3);
    $(OUT_d2).appendTo(setArea4);
    }
});
</script>

HTML部分

JavaScript部分で定義したIDやClassを好きなところで呼び出すだけ。
動的な部分のHTMLは、JavaScript側で記述しておきましょう。

<table>
<tbody><tr>
    <td><div id="logo1" /><img src="https://hoge/1.png" />
    <td><div id="logo2" /><img src="https://hoge/2.png" /></a></td>
</tr><tr>
    <td><div id="price1" /></td>
    <td><div id="price2" /></td>
</tr></tbody>
</table>

全体

<table>
<tbody><tr>
    <td><div id="logo1" /><img src="https://hoge/1.png" />
    <td><div id="logo2" /><img src="https://hoge/2.png" /></a></td>
</tr><tr>
    <td><div id="price1" /></td>
    <td><div id="price2" /></td>
</tr></tbody>
</table>

<!-- JSはソースの可能な限り下の方で呼びましょう -->
<script>
var setArea1 = $('#logo1'),
setArea2 = $('#price1');
$.ajax({
    url: 'APIのURLその１',
    dataType: 'json',
    success: function(data){
    var OUT1 =`<a href="${data.link}" target="_blank">`,
    OUT2 = `<a href="${data.link}" target="_blank">${data.price}<br>${data.point}</a>`;
    $(OUT1).appendTo(setArea1);
    $(OUT2).appendTo(setArea2);
    }
});
var setArea3 = $('#logo2'),
setArea4 = $('#price2');
$.ajax({
    url: 'APIのURLその2',
    dataType: 'json',
    success: function(data){
    var OUT3 =`<a href="${data.link}" target="_blank">`,
    OUT4 = `<a href="${data.link}" target="_blank">${data.price}<br>${data.point}</a>`;
    $(OUT_d1).appendTo(setArea3);
    $(OUT_d2).appendTo(setArea4);
    }
});
</script>

できたもの

https://hmd.site/main/post-59068/ ※ R18の内容を含むので、閲覧注意。