Как отобразить массивы json с помощью jquery? - PullRequest
Новая
       2

Как отобразить массивы json с помощью jquery?

0 голосов
/ 01 февраля 2011

Я пытался использовать $ .getJSON, чтобы просмотреть массивы json из примера кода Twitter API и отобразить каждое из этих значений с помощью jquery?но это не показало бы что-нибудь, чтобы был оценен какой-либо пример / помощьмассив от http://dev.twitter.com/doc/get/geo/search

{
  "result": {
    "places": [
      {
        "name": "Twitter HQ",
        "country": "The United States of America",
        "country_code": "US",
        "attributes": {
          "street_address": "795 Folsom St"
        },
        "url": "http://api.twitter.com/1/geo/id/247f43d441defc03.json",
        "id": "247f43d441defc03",
        "bounding_box": {
          "coordinates": [
            [
              [
                -122.400612831116,
                37.7821120598956
              ],
              [
                -122.400612831116,
                37.7821120598956
              ],
              [
                -122.400612831116,
                37.7821120598956
              ],
              [
                -122.400612831116,
                37.7821120598956
              ]
            ]
          ],
          "type": "Polygon"
        },
        "contained_within": [
          {
            "name": "San Francisco",
            "country": "The United States of America",
            "country_code": "US",
            "attributes": {

            },
            "url": "http://api.twitter.com/1/geo/id/5a110d312052166f.json",
            "id": "5a110d312052166f",
            "bounding_box": {
              "coordinates": [
                [
                  [
                    -122.51368188,
                    37.70813196
                  ],
                  [
                    -122.35845384,
                    37.70813196
                  ],
                  [
                    -122.35845384,
                    37.83245301
                  ],
                  [
                    -122.51368188,
                    37.83245301
                  ]
                ]
              ],
              "type": "Polygon"
            },
            "full_name": "San Francisco, CA",
            "place_type": "city"
          }
        ],
        "full_name": "Twitter HQ, San Francisco",
        "place_type": "poi"
      }
    ]
  },
  "query": {
    "url": "http://api.twitter.com/1/geo/search.json?query=Twitter+HQ&accuracy=0&autocomplete=false&granularity=neighborhood",
    "type": "search",
    "params": {
      "granularity": "neighborhood",
      "accuracy": 0,
      "autocomplete": false,
      "query": "Twitter HQ"
    }
  }
}



<!---- CODE --->
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery-TwitterAPI json</title>
<script type="text/javascript"         src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
  $('#letter-b a').click(function() {
    $.getJSON('geo.json', function(data) {
      $('#tweetstuff').empty();
      $.each(data.results, function(entryIndex, entry) {
        var html = '<div class="entry">';
        html += 'places' + entry.places + '</br>';
        html += 'name' + entry.places.name + '</br>';
        html += 'country' + entry.places.country + '</br>';
        html += 'attributes' + entry.places.attributes + '</br>';
        html += 'url' + entry.places.url + '</br>';
        html += 'id' + entry.places.id + '</br>';
        html += 'places' + entry.places.bounding_box + '</br>';
        html += 'coordinates' + entry.places.coordinates + '</br>';
        html += '</div>';
        $('#dictionary').append(html);
      });
    });
    return false;
  });
});



</script>
</head>
<body>

<h1>jQuery-Twitter API Example</h1>

json

      <div class="letters">
        <div class="letter" id="letter-a">
          <h3><a href="#">A</a></h3>
        </div>

      </div>
      <div id="tweetstuff">
      </div>

</body>
</html>

1 Ответ

3 голосов
/ 01 февраля 2011

В вашем коде куча ошибок. Это «результат», а не «результаты», и это объект, а не массив, так что вы можете использовать data.result.places - это то, где хороший редактор JavaScript помогает. Также на вашей странице нет элемента с идентификатором «словарь». И это <br/>, а не </br>.

Вот рабочий код: 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery-TwitterAPI json</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
var data = {
  "result": {
    "places": [
      {
        "name": "Twitter HQ",
        "country": "The United States of America",
        "country_code": "US",
        "attributes": {
          "street_address": "795 Folsom St"
        },
        "url": "http://api.twitter.com/1/geo/id/247f43d441defc03.json",
        "id": "247f43d441defc03",
        "bounding_box": {
          "coordinates": [
            [
              [
                -122.400612831116,
                37.7821120598956
              ],
              [
                -122.400612831116,
                37.7821120598956
              ],
              [
                -122.400612831116,
                37.7821120598956
              ],
              [
                -122.400612831116,
                37.7821120598956
              ]
            ]
          ],
          "type": "Polygon"
        },
        "contained_within": [
          {
            "name": "San Francisco",
            "country": "The United States of America",
            "country_code": "US",
            "attributes": {

            },
            "url": "http://api.twitter.com/1/geo/id/5a110d312052166f.json",
            "id": "5a110d312052166f",
            "bounding_box": {
              "coordinates": [
                [
                  [
                    -122.51368188,
                    37.70813196
                  ],
                  [
                    -122.35845384,
                    37.70813196
                  ],
                  [
                    -122.35845384,
                    37.83245301
                  ],
                  [
                    -122.51368188,
                    37.83245301
                  ]
                ]
              ],
              "type": "Polygon"
            },
            "full_name": "San Francisco, CA",
            "place_type": "city"
          }
        ],
        "full_name": "Twitter HQ, San Francisco",
        "place_type": "poi"
      }
    ]
  },
  "query": {
    "url": "http://api.twitter.com/1/geo/search.json?query=Twitter+HQ&accuracy=0&autocomplete=false&granularity=neighborhood",
    "type": "search",
    "params": {
      "granularity": "neighborhood",
      "accuracy": 0,
      "autocomplete": false,
      "query": "Twitter HQ"
    }
  }
};


$(document).ready(function() {
  $('#letterA A').click(function() {
    //$.getJSON('geo.json', function() {
      //$('#tweetstuff').empty();
      $.each(data.result.places, function(entryIndex, entry) {
        var html = '<div class="entry">';
        html += 'place ' + entryIndex + '<br/>';
        html += 'name: ' + entry.name + '<br/>';
        html += 'country: ' + entry.country + '<br/>';
        html += 'attributes: ' + entry.attributes + '<br/>';
        html += 'url: ' + entry.url + '<br/>';
        html += 'id: ' + entry.id + '<br/>';
        html += 'places: ' + entry.bounding_box.coordinates + '<br/>';
        //html += 'coordinates' + entry.coordinates + '<br/>';
        html += '</div>';
        $('#dictionary').append($(html));
      });
    //});
    return false;
  });
});



</script>
</head>
<body>

<h1>jQuery-Twitter API Example</h1>

json

      <div class="letters">
        <div class="letter" id="letterA">
          <h3><a href="#">A</a></h3>
        </div>

      </div>
      <div id="dictionary">
      </div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...