Question

我试图做一个简单的练习，但我想我是在考虑它。我从Json获得了价值观：

{
"films": [
    {
        "title": "Platoon",
        "director": "Bob",
        "synopsis": "<p>Lorem ipsum dolor sit amet</p>",
        "genre": ["action"]
    },
    {
        "title": "Alien",
        "director": "Jack",
        "synopsis":"<p>Lorem ipsum dolor sit amet</p>",
        "genre": ["action,horror"]
    },
    {
        "title": "Goonies",
        "director": "Danielle",
        "synopsis":"<p>Lorem ipsum dolor sit amet</p>",
        "genre": ["action,comedy"]
    },
    {
        "title": "Spiderman",
        "director": "Sam",
        "synopsis":"<p>Lorem ipsum dolor sit amet</p>",
        "genre": []
    }
]

}

并将它们放在像这样的html中：

$(document).ready(function() {
$.getJSON("films.json").done(function(data) {
    $.each(data.films, function(i) {
        $('#films').append('<div class="film">' +
        '<div class="message__title">' + data.films[i].title + '</div>' +
        '<div class="message__director">' + data.films[i].director + '</div>' +
        '<div class="message__synopsis">' + data.films[i].synopsis + '</div>' +
        '<div class="message__genre">' + data.films[i].genre + '</div>' +
        "</div>");
    });
});

}）;

如何在不同的html块中分类（如p标签中的每一个）？我尝试在第一个函数中运行另一个循环，但它打印块两次，而不是分离类型。

欢迎任何帮助，谢谢！

Answer 1

问题是因为genres是一个数组，其中包含一个逗号分隔的字符串，您需要先在split()之前对其进行迭代，然后才能在当前each()内的另一个循环中进行迭代迭代data.films。

在调用append()之前，您需要使用逻辑来在单独的字符串中构建HTML。像这样：

＆＃13;

var data = {
  "films": [{
      "title": "Platoon",
      "director": "Bob",
      "synopsis": "<p>Lorem ipsum dolor sit amet</p>",
      "genre": ["action"]
    },
    {
      "title": "Alien",
      "director": "Jack",
      "synopsis": "<p>Lorem ipsum dolor sit amet</p>",
      "genre": ["action,horror"]
    },
    {
      "title": "Goonies",
      "director": "Danielle",
      "synopsis": "<p>Lorem ipsum dolor sit amet</p>",
      "genre": ["action,comedy"]
    },
    {
      "title": "Spiderman",
      "director": "Sam",
      "synopsis": "<p>Lorem ipsum dolor sit amet</p>",
      "genre": []
    }
  ]
}

// in your $.ajax success:
var html = data.films.map(function(film) {
  var filmBlock = '<div class="film">' +
    '<div class="message__title">' + film.title + '</div>' +
    '<div class="message__director">' + film.director + '</div>' +
    '<div class="message__synopsis">' + film.synopsis + '</div>' +
    '<div class="message__genre">';
    
  (film.genre[0] || '').split(',').forEach(function(genre) {
    filmBlock += '<p>' + genre + '</p>';
  });
  return filmBlock + '</div></div>';
}).join('');

$('#films').append(html);

＆＃13;

.film { 
  border: 1px solid #C00;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="films"></div>

＆＃13;

请注意，如果您将split()作为实际数组而不是数组中的单个逗号分隔字符串返回，则可以使genre逻辑冗余，并且JSON响应更好地构建，这是相当的没有意义的。

换句话说，请回复：

"genre": ["action", "horror"]

而不是：

"genre": ["action,horror"]

使用Jquery在JSON对象中分隔嵌套数组

1 个答案: