配列からリストの作成

Question

前提・実現したいこと

配列の「name」と「url」を使用して、リンクとしてhtmlに出力したいのですが、方法がわからず、困っております。

var test = [
            {name: 'あ', url: 'ka.com'},
            {name: 'い', url: 'ki.com'},
            {name: 'う', url: 'ku.com'},
        ]; 

下記のコードのように出力されると理想的です。

<ul>
 <li><a href="ka.com">あ</a></li>
 <li><a href="ki.com">い</a></li>
 <li><a href="ku.com">う</a></li>
</ul>

どなたかお教えいただけると、大変助かります。

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[11111]

なにがどのように分からないかも分からず、困っている状況でして・・・
ご親切な回答者をお待ちしております。

[YT0014]

HTMLは文字列でしかありません。配列から、上記のHTMLの文字列を作成するというコードを書いてください。

[11111]

もう少しこのような回答がついた場合、質問を閉じます。

[SakuBlade]

自身で何も試さずに質問しているとしたらそれは丸投げでしかありません

[Lhankor_Mhy]

ほとんどそのままで解決する回答がついているので、削除リクエストを出す必要はなかったと思います。

回答に不明の点があるのであれば、「コメント投稿」というところを押して、わからない点を伝えた方がいいと思いますよ。

[m.ts10806]

何も手がつかないのなら、そこに手を出す段階であるということ。
これでそのままのコードを得たとして分かった気にすらなれません。

[m.ts10806]

丸投げ作業依頼に応えることは本当に親切か？考えてみてください。
「質問するときのヒント」を読んでも今の考えが変わらないのでしたら、今後まともにアドバイスは得られないと思います。

[think49]

ガイドラインを読みましょう
https://teratail.com/help/question-tips#questionTips2

Answer 1

const test = [
            {name: 'あ', url: 'ka.com'},
            {name: 'い', url: 'ki.com'},
            {name: 'う', url: 'ku.com'},
        ]; 
const html = `<ul>\n` + test.map(e =>`  <li><a href="${e.url}">${e.name}</a></li>`).join(`\n`) + `\n</ul>\n`;
console.log(html);

Answer 2

この質問は終了いたします。

Comments

[Lhankor_Mhy]

解決につながる回答がついたのちに、具体的な解決手段が記載されていない自己解決をしているので、低評価します。論外です。

[m.ts10806]

ご自身が同じような問題を抱えてこのページを訪れたと思ってみてください。

>解決した方法
>この質問は終了いたします。

「は？」ってなりません？

書いたようにしか動かないプログラミングにおいて
ルール守れない性質は致命的です。
>https://teratail.com/help#resolve-myself
>また後から読む人のためにも、具体的な解決手順を記載してください。