JS循环遍历ajax结果[重复]答案

【问题标题】：JS loop through ajax result [duplicate]JS循环遍历ajax结果[重复]
【发布时间】：2021-09-06 05:38:00
【问题描述】：

我得到这个作为我的 ajax 请求结果：

{
   "12":{
      "name":"Diana",
      "age":"51",
      "mid":"562132",
      "character":{
         "height":"180",
         "suffix":" cm",
         "prefix":"Heinght in: ",
         "ratio":{
            "w":"99",
            "l":"12"
         }
      }
   },
   "13":{
      "name":"Rachel",
      "age":"32",
      "mid":"56547",
      "character":{
         "height":"1.7",
         "suffix":" m",
         "prefix":"Height in: ",
         "ratio":{
            "w":"45",
            "l":"1"
         }
      }
   },
   "14":{
      "name":"Nova",
      "age":"34",
      "mid":"554666",
      "character":{
         "price":"11.999",
         "suffix":" EUR",
         "prefix":"Height in: ",
         "ratio":{
            "w":"176",
            "l":"87"
         }
      }
   }
}

我想循环并为每个项目构建 html，这是我的尝试；我尝试了 json parse 和 json stringify 但我得到未定义的错误或 Uncaught SyntaxError: Unexpected token o in JSON at position 1:

        function createHtml(data){
var data = JSON.parse(data);
            var html = '<h1>Data:</h1>';
            
            for(var i = 0; i < data.length; i++) {
                html += '<div class="item">';
                html += '<div class="name">'+data[i].name+'</div>';
                html += '</div>';
            }
            $('#datalist').html(html);
        }

【问题讨论】：

No repro on：Uncaught SyntaxError: Unexpected token o in JSON at position 1 - 解析对我来说没问题，你确定这是你传递给函数的数据并且它是作为字符串传递的吗？
数据已经是一个对象不要解析它（或字符串化它）
已经是对象就不需要解析了
你解析的是一个对象，而不是一个数组。应该是for(var i in data);
不完全是重复的，但this 应该是你第一个看到的地方，给出：SyntaxError: Unexpected token o in JSON at position 1

标签： javascript jquery

【解决方案1】：

您看到的错误是因为您在对象上调用JSON.parse()，而不是字符串。 JSON 字符串已经反序列化，因此您无需再次执行该操作。

您遇到的第二个问题是您的数据结构是一个对象。要遍历它，您需要一种将其转换为数组的方法。这可以使用Object.entries() 来实现。

从那里您可以简单地使用map() 根据数组中对象的内容构建您的HTML 字符串。试试这个：

function createHtml(data) {
  let html = data.map(arr => `<div class="item"><div class="name">${arr[1].name}</div></div>`).join('');
  $('#datalist').html(`<h1>Data:</h1>${html}`);
}

let data = {12:{name:"Diana",age:"51",mid:"562132",character:{height:"180",suffix:" cm",prefix:"Heinght in: ",ratio:{w:"99",l:"12"}}},13:{name:"Rachel",age:"32",mid:"56547",character:{height:"1.7",suffix:" m",prefix:"Height in: ",ratio:{w:"45",l:"1"}}},14:{name:"Nova",age:"34",mid:"554666",character:{price:"11.999",suffix:" EUR",prefix:"Height in: ",ratio:{w:"176",l:"87"}}}};
createHtml(Object.entries(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="datalist"></div>

【讨论】：

由于 OP 表明他们正在使用 jQuery，并且简单的 JS 字符串插值不能正确地进行 HTML 转义，我建议像 data.forEach(arr => $('<div>', {class: "name", text: arr[1].name}).appendTo("#datalist").wrap('<div class="item">'));
@Tomalak 与使用 html() 方法添加整个字符串数组相比有什么好处？ HTML 会在那个阶段被转义/清理，不是吗？
嗯...如果你这样做 <div class="item"><div class="name">${arr[1].name}</div></div> 和 arr[1].name 不是 HTML，而是纯文本，那么不，它不会。