Question

这是我的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);
        }

Answer 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>

Answer 2

for(x in data){
    
    const row = data[x];
    console.log(row.name, row.age, row.character.height);
}

戴安娜 51 180

雷切尔 32 1.7

Nova 34 未定义

JS循环遍历ajax结果

2 个答案: