Question

尝试使用jquery通过getJSON从嵌套数组中显示json数据，任何建议将不胜感激

heroku addons

JSON文件

$(document).ready(function() {

  $.getJSON('https://duunitori.fi/api/v1/jobentries?search=putkimies&format=json',
   function(data) {
     var results = data.results.slice(0, 0);
    $.each(data, function(key, val) {
      $('.putkimies-positions').append('<p>' + data.results  + '</p>');
    });
  });
});

Answer 1

您需要遍历响应对象的results属性（data.results），该数组中的每个项目也是一个对象，因此您需要获取属性val.heading，{{1} }，val.date_posted等

val.municipality_name

$(document).ready(function() {

  $.getJSON('https://duunitori.fi/api/v1/jobentries?search=putkimies&format=json',
   function(data) {
    $.each(data.results, function(key, val) {
      $('.putkimies-positions').append('<p>' + val.heading  + '</p>');
    });
  });
});

Answer 2

var html = "";
$.getJSON('https://duunitori.fi/api/v1/jobentries?search=putkimies&format=json',
  function (data) {
    $.each(data.results, function (index, item) {
      html += "<ul>" + index;
      html += "<li><ul> Heading:- " + item.heading + "</ul></li>";
      html += "<li><ul> Company name:-" + item.company_name + "</ul></li>";
      html += "<li><ul> Slug:- " + item.slug + "</ul></li>";
      html += "</ul>";
    });
    $(".putkimies-positions").append(html);
  });

ul { list-style-type: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class='putkimies-positions'></div>

Answer 3

我只是用很少的脚本更新来更新您的代码。试试这个，希望对您有所帮助。谢谢

$(document).ready(function() {
  $.getJSON('https://duunitori.fi/api/v1/jobentries?    search=putkimies&format=json',
   function(data) {
    $.each(data.results, function(key, val) {
      $('.putkimies-positions').append(
        '<li><label>Heading: ' + val.heading  + '</label>' +
        '<span>Municipality Name: ' + val.municipality_name + '</span>' +
        '<small>Date: ' + val.date_posted + '</small></li>'
      );
    });
  });
});

.putkimies-positions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.putkimies-positions li + li {
  margin-top: 20px;
}

.putkimies-positions li label,
.putkimies-positions li span, 
.putkimies-positions li small {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="putkimies-positions"></ul>

通过jQuery显示嵌套的JSON数组

3 个答案: