json api 배열 jquery를 통한 반복 루프

Question

이 jquery 코드는 span HTML 입력 요소 안에 json 데이터를 표시합니다. 하지만 영화 장르의 배열 객체를 표시하기 위해 for 루프를 구현하지 못했습니다.

는 지금은 배열의 단지 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>

Answer 1

뭔가 같은 : 배열을 생성합니다

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

그 다음 쉼표로 구분 된 문자열로 결합하십시오.

Answer 2

당신은 join()를 사용하여 장르 이름의 배열에 json.genres 배열 다음 .map() methidand를 사용하여 쉼표로 구분 된 문자열에 가입 은밀한 수 :

var names = $.map(json.genres, function() { return this.name }).join(",");