CODEWITHSUNDEEP
javascriptjqueryhtml
user2953989
user2953989

Reputation: 2979

Displaying arrays in divs with classes using JavaScript

I am using JavaScript to display a list of data arrays on my website from Google sheets. At the moment the data is just printed as a long list so I would like to style it, starting by having each array in its own div. At the moment all the data is appended into the same div and is only separated by <p> tags.

In my code below you can see I have tried to create the individual divs with class 'group' but this just repeatedly prints all the data into <div class="group">, instead of each array being in a <div class="group">. 

// ID of the Google Spreadsheet
var spreadsheetID = "1pruXYXrbITR7CoQXZG1I1kyS4DahYBXmGMDEK2T6MpY";

// Make sure it is public or set to Anyone with link can view
var url = "https://spreadsheets.google.com/feeds/list/1pruXYXrbITR7CoQXZG1I1kyS4DahYBXmGMDEK2T6MpY/od6/public/values?alt=json";

$(document).ready(function() {
  //Get JSON data
  $.getJSON(url, function(data) {
    var entry = data.feed.entry;

    // the master obj
    var grouped = {};
    // socs obj
    var socs = {};

    var i = 0;
    entry.forEach(function(a) {
      grouped[a.gsx$name.$t] = grouped[a.gsx$name.$t] || [];
      socs[i] = a.gsx$name.$t;
      grouped[a.gsx$name.$t].push({
        position: a.gsx$position.$t,
        member: a.gsx$member.$t
      });
      i++;
    });

    // remove the duplicates from socs array
    var uniqueSocs = [];
    $.each(socs, function(i, el) {
      if ($.inArray(el, uniqueSocs) === -1) uniqueSocs.push(el);
    });



    $(uniqueSocs).each(function(key, content) {
      //debug
      //console.log(grouped[content]);

      //the socs and positions
      socPos = grouped[content]

      var $newDiv = $("<div/>").addClass("group");

      //print the soc
      $('.test').append($newDiv);
      $('.group').append("<h4>" + content + "</h4>");

      $(socPos).each(function(key, param) {
        //print the positions

        $('.group').append(param.position + " - " + param.member + "<br />")

      });
    });

  });

});

Upvotes: 1

Views: 184

Answers (1)

tao
tao

Reputation: 90058

After toy-ing with your dataset a bit more, I think I understood what you want. Here's an example of grouping your items by object properties. I used lodash's groupBy(), as I'm used to it, but there are other helper libraries having similar functions (although, personally, I don't think one ever needs more than lodash, no matter how complex their... thing is):

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>'
          }))
      })
    })
  })
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;
}
<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>

Upvotes: 2

Related Questions