jquery를 사용하여 JSON 파일에서 지역별 국가 목록을 가져 오는 방법

마나스 란얀 프라 단

JSON 형식

[{"name": "Sri Lanka","region":"Asia"}, {"name": "India","region":"Asia"}, {"name": "kenya","region":"Africa"}, {"name": "Zimbabwe","region":"Africa"}]

아래와 같이 표시하고 싶었습니다.

  • 아프리카
  • 케냐
  • 짐바브웨

  • 아시아

  • 인도
  • 스리랑카
손님 271314

시험

var data = [{
  "name": "Sri Lanka",
  "region": "Asia"
}, {
  "name": "India",
  "region": "Asia"
}, {
  "name": "Kenya",
  "region": "Africa"
}, {
  "name": "Zimbabwe",
  "region": "Africa"
}];

$.each(data, function(key, val) {
  // if `body` does not already have `ul` having
  // `class` `region` , append `ul` with first `name`
  // utilize `b` element as "header" for `ul` ,
  // to render `region` "header" above `ul` `li` `name`s
  if (!$("body ul." + val.region).is("*")) {
    $("<ul />", {
      "class": val.region,
      "html": "<li>" + val.name + "</li>"
    })
    .appendTo("body")
    .before("<b class=" + val.region + ">" + val.region + "</b>");
  } else {
    // if `b` `textContent` is `region` ,
    // append remaining `name` to `ul` that follows `b`
    $("b." + val.region).each(function() {
      if (this.textContent === val.region) {
        $(this).next("ul").append("<li>" + val.name + "</li>")
      }
    })
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

PHP를 사용하여 JSON 파일을 올바르게 가져 오는 방법

분류에서Dev

ajax를 사용하여 json api에서 json 배열을 가져 오는 방법

분류에서Dev

Python 목록에 여러 요소가있는 json 파일에서 요소를 가져 오는 방법

분류에서Dev

IronPython을 사용하여 Python 파일에서 변수를 가져 오는 방법

분류에서Dev

LibGit2Sharp를 사용하여 가져 오기에서 원격 변경 목록을 가져 오는 방법

분류에서Dev

Python을 사용하여 json에서 데이터를 가져 오는 방법

분류에서Dev

QML을 사용하여 목록보기 페이지에서 단일 항목 세부 정보 페이지를 가져 오는 방법은 무엇입니까?

분류에서Dev

수식을 사용하여 Excel의 사용자 지정 목록에서 다음 값을 가져 오는 방법

분류에서Dev

수식을 사용하여 Excel의 사용자 지정 목록에서 다음 값을 가져 오는 방법

분류에서Dev

Ajax : FormData 및 jQuery를 사용하여 '빈'파일을 보내고 $ _FILES에서 가져 오는 방법

분류에서Dev

jquery를 사용하여 중첩 된 JSON 개체에서 값을 가져 오는 방법은 무엇입니까?

분류에서Dev

내 앱용 Zomato에서 JSON 파일을 가져 오는 방법 ...!

분류에서Dev

winrt c #을 사용하여 장치에서 파일 목록을 가져 오는 방법

분류에서Dev

Retrofit2를 사용하여 우편 번호 JSON 본문으로 주소 목록을 가져 오는 방법

분류에서Dev

파일 업로드를 사용하지 않고 asp.net JQuery에서 파일 이름을 가져오고 파일을 업로드하는 방법

분류에서Dev

iOS에서 URL을 사용하여 이미지를 가져 오는 방법

분류에서Dev

API를 사용하여 Google 문서에서 제목을 가져 오는 방법

분류에서Dev

VBA를 사용하여 Excel에서 셀의 글꼴 값 목록을 가져 오는 방법

분류에서Dev

Python과 함께 Selenium을 사용하여 목록에서 특정 요소를 가져 오는 방법

분류에서Dev

Powershell Get-Azvm을 사용하여 Azure에서 VM 목록의 상태를 가져 오는 방법

분류에서Dev

LINQ를 사용하여 범위 내에서 레코드 목록을 가져 오는 방법

분류에서Dev

문자열을 사용하여 배열 목록에서 데이터를 가져 오는 방법

분류에서Dev

PHP를 사용하여 Mandrill API에서 발신자 목록을 가져 오는 방법

분류에서Dev

GitLab에서 API를 사용하여 pull 요청 목록을 가져 오는 방법

분류에서Dev

Ubuntu 터미널에서 grep을 사용하여 txt 파일에서 특정 단어를 가져 오는 방법

분류에서Dev

__init__를 사용하여 파이썬에서 최상위 파일을 가져 오는 방법

분류에서Dev

조각에서 json 파서를 사용하여 목록보기 가져 오기

분류에서Dev

node.js를 사용하여 mongodb에서 항목을 가져 오는 방법

분류에서Dev

Volley를 사용하여 JSON을 통해 mysql에서 여러 행의 데이터를 가져 오는 방법

Related 관련 기사

  1. 1

    PHP를 사용하여 JSON 파일을 올바르게 가져 오는 방법

  2. 2

    ajax를 사용하여 json api에서 json 배열을 가져 오는 방법

  3. 3

    Python 목록에 여러 요소가있는 json 파일에서 요소를 가져 오는 방법

  4. 4

    IronPython을 사용하여 Python 파일에서 변수를 가져 오는 방법

  5. 5

    LibGit2Sharp를 사용하여 가져 오기에서 원격 변경 목록을 가져 오는 방법

  6. 6

    Python을 사용하여 json에서 데이터를 가져 오는 방법

  7. 7

    QML을 사용하여 목록보기 페이지에서 단일 항목 세부 정보 페이지를 가져 오는 방법은 무엇입니까?

  8. 8

    수식을 사용하여 Excel의 사용자 지정 목록에서 다음 값을 가져 오는 방법

  9. 9

    수식을 사용하여 Excel의 사용자 지정 목록에서 다음 값을 가져 오는 방법

  10. 10

    Ajax : FormData 및 jQuery를 사용하여 '빈'파일을 보내고 $ _FILES에서 가져 오는 방법

  11. 11

    jquery를 사용하여 중첩 된 JSON 개체에서 값을 가져 오는 방법은 무엇입니까?

  12. 12

    내 앱용 Zomato에서 JSON 파일을 가져 오는 방법 ...!

  13. 13

    winrt c #을 사용하여 장치에서 파일 목록을 가져 오는 방법

  14. 14

    Retrofit2를 사용하여 우편 번호 JSON 본문으로 주소 목록을 가져 오는 방법

  15. 15

    파일 업로드를 사용하지 않고 asp.net JQuery에서 파일 이름을 가져오고 파일을 업로드하는 방법

  16. 16

    iOS에서 URL을 사용하여 이미지를 가져 오는 방법

  17. 17

    API를 사용하여 Google 문서에서 제목을 가져 오는 방법

  18. 18

    VBA를 사용하여 Excel에서 셀의 글꼴 값 목록을 가져 오는 방법

  19. 19

    Python과 함께 Selenium을 사용하여 목록에서 특정 요소를 가져 오는 방법

  20. 20

    Powershell Get-Azvm을 사용하여 Azure에서 VM 목록의 상태를 가져 오는 방법

  21. 21

    LINQ를 사용하여 범위 내에서 레코드 목록을 가져 오는 방법

  22. 22

    문자열을 사용하여 배열 목록에서 데이터를 가져 오는 방법

  23. 23

    PHP를 사용하여 Mandrill API에서 발신자 목록을 가져 오는 방법

  24. 24

    GitLab에서 API를 사용하여 pull 요청 목록을 가져 오는 방법

  25. 25

    Ubuntu 터미널에서 grep을 사용하여 txt 파일에서 특정 단어를 가져 오는 방법

  26. 26

    __init__를 사용하여 파이썬에서 최상위 파일을 가져 오는 방법

  27. 27

    조각에서 json 파서를 사용하여 목록보기 가져 오기

  28. 28

    node.js를 사용하여 mongodb에서 항목을 가져 오는 방법

  29. 29

    Volley를 사용하여 JSON을 통해 mysql에서 여러 행의 데이터를 가져 오는 방법

뜨겁다태그

보관