> 웹 프론트엔드 > JS 튜토리얼 > json 객체와 배열 값에 대한 간략한 토론

json 객체와 배열 값에 대한 간략한 토론

怪我咯
풀어 주다: 2017-03-31 09:24:23
원래의
2122명이 탐색했습니다.

object 값에 따라:

jQuery코드는 다음과 같습니다

(function ($) {
      $.getJSON('ajax/test.json', function (data) {
        var items = [];

        $.each(data.comments, function (key, val) {
          items.push(&#39;<li class="&#39; + &#39;tag&#39; + val.class + &#39;">&#39; + &#39;<a href="#">&#39; + val.content + &#39;</a>&#39; + &#39;</li>&#39;);
        });

        //第一个标签
        $(&#39;<ul/>&#39;, {
          &#39;class&#39;:&#39;&#39;,
          html:items.join(&#39;&#39;)
        }).appendTo(&#39;.tags&#39;);

        //第二个标签
        $(&#39;<ul/>&#39;, {
          &#39;class&#39;:&#39;alt&#39;,
          html:items.join(&#39;&#39;)
        }).appendTo(&#39;.tags&#39;);
      });
    })(jQuery);
로그인 후 복사



json 코드는 다음과 같습니다

{"comments":[
  {
    "class":"1",
    "content":"Lorem ipsum"
  },
  {
    "class":"2",
    "content":"Dolor sit amet"
  },
  {
    "class":"3",
    "content":"Consectetur adipiscing elit"
  },
  {
    "class":"2",
    "content":"Proin"
  },
  {
    "class":"4",
    "content":"Sagittis libero"
  },
  {
    "class":"1",
    "content":"Aliquet augue"
  },
  {
    "class":"1",
    "content":"Quisque dui lacus"
  },
  {
    "class":"5",
    "content":"Consequat"
  },
  {
    "class":"2",
    "content":"Dictum non"
  },
  {
    "class":"1",
    "content":"Venenatis et tortor"
  },
  {
    "class":"3",
    "content":"Suspendisse mauris"
  },
  {
    "class":"4",
    "content":"In accumsan"
  },
  {
    "class":"1",
    "content":"Egestas neque"
  },
  {
    "class":"5",
    "content":"Mauris eget felis"
  },
  {
    "class":"1",
    "content":"Suspendisse"
  },
  {
    "class":"2",
    "content":"condimentum eleifend nulla"
  }
]}
로그인 후 복사

array 값에 따라:

jQuery 코드는 다음과 같습니다

(function ($) {
      $.getJSON(&#39;ajax/test_array.json&#39;, function (data) {
        var items = [];

        $.each(data.comments, function (key, val) {
          items.push(&#39;<li class="&#39; + &#39;tag&#39; + val[0] + &#39;">&#39; + &#39;<a href="#">&#39; + val[1] + &#39;</a>&#39; + &#39;</li>&#39;);
        });

        //第一个标签
        $(&#39;<ul/>&#39;, {
          &#39;class&#39;:&#39;&#39;,
          html:items.join(&#39;&#39;)
        }).appendTo(&#39;.tags&#39;);

        //第二个标签
        $(&#39;<ul/>&#39;, {
          &#39;class&#39;:&#39;alt&#39;,
          html:items.join(&#39;&#39;)
        }).appendTo(&#39;.tags&#39;);
      });
    })(jQuery);
로그인 후 복사

json 코드는 다음과 같습니다

{"comments":[
  ["1", "Lorem ipsum"],
  ["2", "Dolor sit amet"],
  ["3", "Consectetur adipiscing elit"],
  ["2", "Proin"],
  ["4", "Sagittis libero"],
  ["1", "Aliquet augue"],
  ["1", "Quisque dui lacus"],
  ["5", "Consequat"],
  ["2", "Dictum non"],
  ["1", "Venenatis et tortor"],
  ["3", "Suspendisse mauris"],
  ["4", "In accumsan"],
  ["1", "Egestas neque"],
  ["5", "Mauris eget felis"],
  ["1", "Suspendisse"],
  ["2", "condimentum eleifend nulla"]
]}
로그인 후 복사

공유 HTML 코드는 다음과 같습니다

<p class="tags"></p>
로그인 후 복사

배열로 가져오면 값 데이터의 양이 훨씬 적어진다는 것을 확실히 알 수 있습니다


위 내용은 json 객체와 배열 값에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿