HTML 페이지에서 JQuery를 사용하여 json 파일에서 태그를 표시하는 방법은 무엇입니까?

json을 사용하여 json 파일을 읽는 데 문제가 있습니다. 나는 JQuery에 대한 지식이별로 없다. 나는 JSON 파일을 따라왔다.HTML 페이지에서 JQuery를 사용하여 json 파일에서 태그를 표시하는 방법은 무엇입니까?

[ 
    {'tag':'Hannover'}, 
    {'tag':'Berlin'}, 
    {'tag':'Munich'}, 
    {'tag':'Frankfurt'}, 
    {'tag':'Hamburg'} 
]

와 자바 스크립트는 다음과 같다 : 내가 원하는 경우도 내가 파일의 태그를 표시해야 원하는 것을 이제

<html> 
    <body> 
    <div class="text-center"> 
     <div class="list"> 
     </div> 
    </div> 
    <br><br> 
    <div class="text-center"> 
     <input type='text' name='checkbox'/> 
     <br><br> 
     <button id="addButton" class="btn btn-primary">Add New</button> 
    </div> 
    </body> 
</html>

과 :

<script> 
    $.getJSON('tagData.json', function(data){ 
    $.each(data.items, function(key, val){ 
     $("<span name='tagList' class='tag label label-info'><span>"+val.tag+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>").appendTo('.list') 
    }); 
    }); 

    $(document).ready(function() { 
    var $listGroup = $('.list') 
    $.each(myTags, function(){ 
     $("<span name='tagList' class='tag label label-info'><span>"+this.tag+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>").appendTo($listGroup); 
    }); 

    $('#addButton').click(function() { 
     var toAdd=$('input[name=checkbox]').val(); 
     var tag = "<span name='tagList' class='tag label label-info'><span>"+toAdd+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>" 
     $(tag).appendTo('.list'); 
    }); 

    $('.list').on('click','span',function() { 
     $(this).parent().remove(); 
    }); 
    }); 
</script>

및 HTML 코드 아래에 언급 더 많은 태그를 수동으로 추가하려면 그렇게 할 수 있어야합니다.

수동으로 태그를 추가 할 수 있지만 JSON 파일을 추가하려고하면 읽을 수없고 수동으로 추가 할 수 없습니다. 이것에 대한 도움은 매우 감사하겠습니다.

아래는 내가 지금까지 해왔 던 것을 보여주는 이미지입니다.

은 또한 바이올린 here

당신을 감사합니다. 태그 제안 페이지의

스크린 샷

출처

2016-06-29 AMIT

'$ .getJSON' 호출 *을'document.ready' 안에 넣으십시오. 현재 요소를 추가하기 전에'.list'에 요소를 추가 할 수 있습니다. –

내가 문제를 해결 한이 jsFiddle 링크를 따르십시오. https://jsfiddle.net/xncp92ho/1/

$(document).ready(function() { 
$.getJSON('https://api.myjson.com/bins/4skih', function(res){ 
$.each(res.data, function(key, val){ 
    $("<span name='tagList' class='tag label label-info'><span>"+val.tag+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>").appendTo('.list') 
}); 

    $('#addButton').click(function() { 
     var toAdd=$('input[name=checkbox]').val(); 
     var tag = "<span name='tagList' class='tag label label-info'><span>"+toAdd+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>" 
     $(".list").append(tag); 
    }); 
});

출처

2016-06-29 12:38:31

안녕 Kaushik, 대단히 감사합니다 지금은 내 프로젝트의 내부. 내가 직면하고있는 유일한 문제는 태그를 제거하기 위해 버튼을 클릭하면 모든 태그가 제거된다는 것입니다. 나는 여러 가지 방법을 시도했지만 모든 태그 (버튼)의 태그와 ID가 같기 때문에 단순히 모든 태그를 스 와이프합니다. 무엇이 잘못 될 수 있는지 알고 있습니까? 나는 바이올린을 업데이트했다. https://jsfiddle.net/xncp92ho/1/ – AMIT

당신은 $.each(data.items, function 통해 반복하고 있지만 JSON 파일 (데이터 매개 변수) 실제로 객체의 단순한 배열, 그래서 이것은 단지 $.each(data, function을해야합니다.

출처

2016-06-29 12:46:42

HTML 페이지에서 JQuery를 사용하여 json 파일에서 태그를 표시하는 방법은 무엇입니까?

답변

관련 문제