Question

我正在使用JavaScript从Google表格中显示我网站上的数据阵列列表。目前，数据只是作为一个长列表打印，所以我想设置它的样式，首先让每个数组都在自己的div中。目前，所有数据都附加到同一个div中，并且只用<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="82dp" android:clickable="true" android:background="#455A64" android:padding="16dp"> <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/group_chat_photo" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentLeft="true" android:src="@mipmap/ic_launcher"/> <ImageView android:id="@+id/group_chat_options" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:src="@drawable/ic_dots_vertical_grey600_24dp" android:contentDescription="group_chat_options" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_toRightOf="@id/group_chat_photo" android:layout_toLeftOf="@id/group_chat_options" android:layout_centerVertical="true" android:layout_marginLeft="8dp" android:layout_marginRight="8dp"> <TextView android:id="@+id/group_name" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Americal AllStars" android:textColor="#FFFFFF" android:textSize="18dp"/> <TextView android:id="@+id/group_members_presence" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/group_name" android:text="Alucard, Client" android:textColor="#0788C9" android:textSize="16dp" /> <TextView android:id="@+id/num_of_group_users" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/group_members_presence" android:layout_alignBottom="@id/group_members_presence" android:paddingLeft="5dp" android:text="and 10 others" android:textColor="#0788C9" android:textSize="16dp" /> </RelativeLayout> </RelativeLayout>个标记分隔。

在下面的代码中，您可以看到我尝试使用类“group”创建单个div，但这只是重复将所有数据打印到<p>，而不是每个数组都在<div class="group">中。

<div class="group">

Answer 1

玩完你的数据集后，我想我理解你想要的东西。以下是按对象属性对项目进行分组的示例。我使用了lodash groupBy()，因为我已经习惯了，但是还有其他帮助程序库具有类似的功能（虽然，个人而言，我不认为一个永远需要的不仅仅是lodash，无论他们的事情多么复杂）：

＆＃13;

let spreadsheetID = "1pruXYXrbITR7CoQXZG1I1kyS4DahYBXmGMDEK2T6MpY",
  url = "https://spreadsheets.google.com/feeds/list/1pruXYXrbITR7CoQXZG1I1kyS4DahYBXmGMDEK2T6MpY/od6/public/values?alt=json";

$(document)
  .ready(function () {
    $.getJSON(url, function (data) {
      let grouped = _.groupBy(data.feed.entry, function (o) {
        return o['gsx$name']['$t'];
      });
      $.each(grouped, function (index, item) {
        $('#example')
          .append($('<fieldset />', {
            html: '<legend>' + index + '</legend>' +
              '<ul><li>' +
              Object.keys(_.groupBy(item, function (o) {
                return o['content']['$t']
              }))
              .map(function (o) {
                return o
                  .replace('position:', '')
                  .replace(', member:', ' &mdash; ')
              })
              .join('</li><li>') +
              '</li></ul>'
          }))
      })
    })
  })

＆＃13;

body {
  margin: 0;
  background-color: #f5f5f5;
  font-family: sans-serif;
}
#example {
  display: flex;
  flex-wrap: wrap;
}
fieldset {
  border-radius: 4px;
  border: none;
  margin: .5rem .5rem 0;
  display: block;
  flex-grow: 1;
  background-color: #fff;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
}
legend {
  background-color: white;
  padding: .2rem .7rem;
  border-radius: 3px;
  font-size: 13px;
  font-weight: bold;
  box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12)
}
ul {
  padding: 0 1rem;
  margin-bottom: .4rem;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="example"></div>

＆＃13;

使用JavaScript在带有类的div中显示数组

1 个答案: