2017-12-31 181 views
1

このjqueryコードは、jsonデータをspan html入力要素内に表示しています。しかし、映画ジャンルの配列オブジェクトを表示するためにforループを実装することに失敗しました。json API経由の簡単なループ

は、今のところは、アレイのちょうど0インデックスだが、私はすべてを表示したい。..

$("#txt-movie-genres").val(json.genres[0].name) 

$(document).ready(function() { 
 
    var url = 'http://api.themoviedb.org/3/', 
 
    mode = 'movie/', 
 
    movie_id, 
 
    key = '?api_key=e9dfeccf734a61b9a52d9d7660f0d0a1'; 
 

 
    $('button').click(function() { 
 
    var input = $('#movie').val(), 
 
     movie_id = encodeURI(input); 
 
    $.ajax({ 
 
     type: 'GET', 
 
     url: url + mode + movie_id + key, 
 
     async: false, 
 
     jsonpCallback: 'testing', 
 
     contentType: 'application/json', 
 
     dataType: 'jsonp', 
 

 
     success: function(json) { 
 

 
     // grab the span elements by ID and replace their text with the json text 
 

 
     // $("#movie-title").text(json.title); 
 
     $("#txt-movie-title").val(json.title) 
 

 
     $("#txt-movie-genres").val(json.genres[0].name) 
 
     console.dir(json); 
 
     }, 
 

 
     error: function(e) { 
 
     console.log(e.message); 
 
     } 
 
    }); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="movie" type="text" /><button>Search</button> 
 

 
<h1>Movie info:</h1> 
 
<p>Movie title: <span id="span-movie-title"></span> </p> 
 

 
<div class="input-group"> 
 
    <input id="txt-movie-title" name="title" type="text" /> 
 
    <div class="input-group-addon"> 
 
    Movie Name 
 
    </div> 
 
</div> 
 

 
<div class="input-group"> 
 
    <input id="txt-movie-genres" name="genres" type="text" /> 
 
    <div class="input-group-addon"> 
 
    Movie Genre 
 
    </div> 
 
</div>

+0

単一の入力で名前を区切っていますか? – Alexander

+0

はい!それは "アクション、アドベンチャー、ホラー"などとなることができます。 –

答えて

3

のような何か:配列を作成します

$("#txt-movie-genres").val(json.genres.map(g => g.name).join(","); 

カンマで区切られた文字列にそれらを結合します。

+1

正確に何を書いていたのですか、この回答の+1 +1 –

+1

これはES6が必要ですか? –

+0

です。地図とそのクールな構文はどちらもES6です。 var arr = []; for(key in json.genres){ arr.push(json.genres [key] .name); } $( "#txt-movie-genres")。val(arr.join( "、")); –

0

あなたはjoin()を使用してカンマ区切りの文字列にそれらを結合、その後.map() methidandを使用して、ジャンル名の配列にjson.genres配列をひそかことができます:あなたは、配列の各要素のための新しい入力を作成したり、コンマを表示しますか

var names = $.map(json.genres, function() { return this.name }).join(","); 
関連する問題