℡Wang Yan 2019-08-10 16:44 采纳率: 100%
浏览 55

无法解析Ajax Json

I am trying the new Twitch API and new to Jquery Ajax. I have successfully completed an Ajax request (for a list of top games) and output it on the console log and inspected the console results to ensure that the results are valid.

However, I am unable to parse the Json successfully into HTML for display:

1) The output shows 'undefined'

2) It is not iterating through the whole Json result set (shows 2 instead of 19 results)

Any advice? Thank you

New Twitch API reference: https://dev.twitch.tv/docs/api/reference/#get-top-games

<script>
  $.ajax('https://api.twitch.tv/helix/games/top',
      {
        headers: {
          "Client-ID":  'XXXXXXXXXXXXXXXXX'
        },
        dataType: 'json',
        success: function ( data ) {
            var content = '';
            $.each(data, function(index, element){
                content += 'id: ' + element.id + '<br />';
                content += 'name: ' + element.name + '<br />';
                $('#output').html(content);
            });
        }
      })
      .then(console.log);
</script>

</head>
<body>

<div id="output"></div>

</body>
  • 写回答

1条回答 默认 最新

  • weixin_33701617 2019-08-10 17:22
    关注

    In the documentation you can see that there is a data property returned in the response. As such you need to iterate through data.data, not just data. The first data refers to the entire object you receive through the argument to the success handler, the second data refers to the property within that object.

    To save confusion it would be worth renaming the argument in the success handler, to response for example.

    Also note that you're appending the content in every iteration of your loop, even though you add more to it in the following iteration. As a result this will duplicate all the previous text nodes. To fix this, move the html() call outside of the loop. Try this:

    success: function(response) {
  var content = '';
  $.each(response.data, function(index, element) {
    content += 'id: ' + element.id + '<br />';
    content += 'name: ' + element.name + '<br />';
  });
  $('#output').html(content);
}
    评论

报告相同问题？

  • javascript解析ajax返回的xml和json格式数据实例详解
    2020-10-20 17:20
    本文将深入探讨如何使用JavaScript解析Ajax返回的XML和JSON格式数据。 首先，我们来看如何处理XML格式的数据。XML是一种可扩展标记语言，常用于结构化数据交换。在JavaScript中，我们可以通过创建`XMLHttpRequest`...
  • ajax 解析json数据
    2016-01-12 12:24
    在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许...在实际项目中，我们通常会结合前端框架，如React、Vue或Angular，使用它们提供的更高级的API来简化AJAX请求和JSON解析过程。
  • jQuery使用ajax方法解析返回的json数据功能示例
    2020-10-20 16:28
    对于开发者而言，理解并熟练使用jQuery的$.ajax()方法以及解析JSON数据是非常重要的。这将有助于开发者构建高效、响应迅速的Web应用程序。同时，确保正确使用JSON数据格式，注意代码的安全性和健壮性，利用现有的...
  • web前端+jquery与ajax+json+手写前端完全实现分页
    2024-05-14 11:26
    本主题聚焦于"web前端+jQuery与Ajax+JSON+手写前端完全实现分页"，这是一种高效的方法来处理大量数据，提升用户体验，同时减轻服务器压力。下面将详细介绍这些关键技术点。 **jQuery** 是一个快速、简洁的...
  • ajax 怎么解析json,Ajax中解析Json的两种方法详解
    2021-08-05 15:45
    不进前一百不改名的博客 //此方法不推荐JSON.parse(); //推荐方法一、两种方法的区别我们先初始化一个json格式的对象：var jsonDate ='{ "name":"周星驰","age":23 }'var jsonObj = eval( '(' + jsonDate+ ')' ); //eval();方法varjsonObj ...
  • ajax动态加载json数据并详细解析
    2020-10-18 05:36
    总的来说，本文深入讲解了使用Ajax技术动态加载和解析json数据的完整过程，包括了前端实现方式、后端数据处理以及客户端和服务器端之间的数据交互。这些知识点对于理解现代Web开发中数据动态加载和交互有着重要意义...
  • AjaxJson实体类与依赖包
    2018-10-09 17:21
    反之，后端生成的`AjaxJson`对象也可以被快速转换为JSON字符串，以便前端解析。 Fastjson的使用方法非常简单，例如，将一个`AjaxJson`对象转换为JSON字符串： ```java AjaxJson result = new AjaxJson(200, "成功...
  • lotus domino AJAX 代理print json
    2022-03-02 08:19
    lotus domino AJAX 代理print json
  • ajax前端怎么解析json,怎样在前端解析由后端传输过来的json？
    2021-08-05 12:39
    Raxxian的博客 有个结构体：type Sln struct {N intX1 stringX2 string}后端给前端一个形如{"N":-2,"X1":"5+2i","X2":"5-2i"}的json，然后由前端获取：function ajaxPopulate() {var oTxt1 = document.getElementById('txt1');...
  • AJAX和JSON
    2024-10-27 13:06
    小旺仔爱代码的博客 JSON(JavaScript Object Notation，JavaScript 对象表示法)是一种基于字符串的轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。JSON 是 JavaScript 数据类型的子集。
  • 没有解决我的问题, 去提问