外部JS関数（配列を返す）をhtmlリストに表示するには

私はモバイルアプリケーションを開発しています。私は自分のhtmlのリストに配列を表示する必要があります。私は外部の.jsファイルにJSONデータが取り出された配列を返す関数を持っています。外部JS関数（配列を返す）をhtmlリストに表示するには

これはJavaScriptで私の関数である。

function getnames() { 
    var url = api + "/name"; 
    $.getJSON(url).done(function (answer) { 
    if (!answer.length) { 
     console.warn("Empty list"); 
    } 
    api.name = response; 
    for (i = 0; i < response.length; i++) { 
     $('#names').html(api.name[i].name); 
    } 

    }).fail(function (data, status, error) { 
    console.error("Something went wrong"); 
    }); 
}

これは、私は彼らがに表示するHTMLリストです：

<div> 
    <div class="widget-container"> 
    <div class="list-group"> 
     <a> 
     <h4 id="names"> 
      <script type="text/javascript"> 
      window.onload = function() { 
       getnames(); 
      }; 
      </script> 
     </h4> 
     </a> 
     this is repeated 4 times.I have 4 headings meaning i need for 4 names   which is as much the array returns 
    </div> 
    </div> 
</div>

私はそれらを表示したいリストがメニューですパネルから。私が持っているコードは何らかの理由で私に姓を示しているだけです。

出典

2016-10-26 ned

window.onload' ...それはほとんど必要ありません '使用しないでくださいそして、jQuery '.ready'はもっと良い/より良いとにかくです。 – trincot

なぜ 'a'タグを使用しますか？そして、重複する 'id'属性値をもたらす何かを繰り返すべきではないことを理解してください。これはHTMLでは許されません。 – trincot

私が正しく理解している場合は、配列要素ごとにh4タグを生成する必要があります。

あなたのコード内のいくつかの問題：

あなたがデータを挿入したい場所であなたのscriptタグを置くには使用はありません。閉じた</body>タグの直前、または<head>タグの直前に置くだけです。
window.loadを使用しないでください。役に立つかもしれない特定のケースがありますが、あなたのケースではそうではありません。代わりにDOMContentLoadedイベントを使用するか、jQueryを使用するときは同等の.ready()メソッドを使用します。
JSON応答引数の名前をanswerとしますが、次にresponseの参照を開始します。同じ変数名を使用してください。
複数のHTMLを同じ要素#namesに割り当てて、前の値を上書きして最後の値のみを残すようにします。
純粋な引数の引数にhtmlメソッドを使用します。 <または&文字を含むテキストには、HTMLで特別な意味があるため、問題が発生する可能性があるため、これはお勧めしません。代わりに.text()を使用してください。
api変数を奇妙な方法で使用します。最初はそれが文字列（url = api + "/name"）であるように見え、その後、nameプロパティに割り当てます。これは機能しますが、コードが不明瞭になります。それが実際にオブジェクトである場合、最初のステートメントはurl = api.toString() + "/name"に等しくなります。
コードには別のh4要素が追加されることはありません。そのために必要な要素を動的に生成することができます。ここで

偽JSONプロバイダを使用するに応じて適応コードは、次のとおりです。

var api = 'https://jsonplaceholder.typicode.com'; 
 

 
function getnames() { 
 
    var url = api + "/posts"; // change to "/name" 
 
    $.getJSON(url).done(function (response) { 
 
    if (!response.length) { 
 
     console.warn("Empty list"); 
 
    } 
 
    $.map(response, function(item) { 
 
     $('.list-group').append($('<h4>').text(item.title)); // change to item.name 
 
    }); 
 
    }).fail(function (data, status, error) { 
 
    console.error("Something went wrong"); 
 
    }); 
 
} 
 

 
$(function() { 
 
    getnames(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div> 
 
    <div class="widget-container"> 
 
    <div class="list-group"> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-10-26 11:21:09 trincot

$('#names').html(api.name[i].name); // You are overwriting with each loop

試してください：HTMLコンテンツを扱う際

$('#names').append(api.name[i].name);

出典

2016-10-26 10:19:00 marcinrek

一つのことがないようにするには、繰り返されるアップデートです：たび、あなたはそれが表示を更新する必要がある場合、DOM、ブラウザのチェックを更新し、潜在的にキック再計算、再ペイントおよび他の高価なプロセスの負荷を削減します。

function getnames() { 
    var url = api + "/name"; 
    $.getJSON(url).done(function (answer) { 
    if (!answer.length) { 
     console.warn("Empty list"); 
    } 

    // jQuery map gives you a new array of the returned values: 
    names = $.map(answer, function(e){ 
     return e.name; 
    }); 

    // Join turns the array into a string, separated with ', ' 
    $('#names').html(names.join(', ')); 

    }).fail(function (data, status, error) { 
    console.error("Something went wrong"); 
    }); 
}

このコードgetJSON呼び出しからanswerを取り、：それはあなたができるならば、これはのように、更新したいコンテンツを構築して、ワンステップでDOMに挿入するために、多くの方が良いでしょうこれを名前プロパティの配列に変換します。結合して、#namesのhtmlメソッドに渡されたカンマ区切りの文字列に変換します。

私はそれが十分にはっきりしていることを望みます - それが理にかなっているかどうか教えてください！

出典

2016-10-26 10:33:03 Beejamin

外部JS関数（配列を返す）をhtmlリストに表示するには

答えて

関連する問題