jsonHTML_practice/dataDisplay.html at master · trillobite/jsonHTML_practice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Displaying the data</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script> <!--MAKE SURE TO INCLUDE JQUERY-->
  <script type='text/javascript' src='jsonHTML.js'></script> <!-- MAKE SURE TO INCLUDE jsonHTML -->
  <script>
  // var dbData = [
  //   {
  //     name: 'Jarblon',
  //     Description: 'Jarblon loves Jarblonins',
  //   },
  //   {
  //     name: 'Karrot',
  //     Description: 'Karrot loves Dolphin back riding',
  //   },
  //   {
  //     name: 'Yoseph',
  //     Description: 'Yoseph likes to swim',
  //   },
  // ]
  //   console.log(dbData);

  var dbData = [];
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        return response.json();
      })
      .then(users => {
        dbData = users;
      })
      .then(() => console.log(dbData))
//I believe I want the description to be in it's own div in an html paragraph, this will be a child object.
$(document).ready(function() {
$.each(dbData, function(indx, dbData) {
    var childDescript = sig('div', {
      text: dbData.email,
    }).textProperties('paragraph').css({
      'margin': '0 auto',
    });
//parent div will contain the name
  sig('div', {
          class: 'defaultClass',
          text: dbData.name,
      }).css({
          'color': 'purple', //purple is such a nice color... don't you agree?
          'text-align': 'center',
          'border': '1px solid black',
          'border-radius': '15px', //I want the border to look pretty!
      }).addChild(childDescript).appendTo('body'); //add the child object and append it to the root div of the DOM.
  });
});
  </script>
</head>
<body>
  <div id="hello">No/yes</div>
</body>
</html>