jsonHTML_practice/dataDisplay.html at master · pANdAs100/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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!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);

      /*
        SOLUTION!!!!!
        fetch is an async function. Your loop that goes through dbData was executing before
        your fetch function was done.
        I placed fetch in it's own function, and set a deferred on it, and your loop will
        execute depending on if fetchData is ready or not.
      */


    //var dbData = [];
    let fetchData = () => {
      let dfd = $.Deferred();

      fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => {
          return response.json();
        })
        .then(users => {
          dfd.resolve(users);
        })
        //.then(() => console.log(dbData))

      return dfd.promise();
    }

    //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 () {
      fetchData().done((data) => { //waits until fetch is done.
        console.log(data);

        let container = sig();

        data.map((dbData) => { //$.each is fine too, I just thought you might want to see this method too.
          console.log(dbData);

          var childDescript = sig('div', {
            text: dbData.email,
          }).css({
            'margin': '0 auto',
          });

          //parent div will contain the name
          let obj = 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);

          container.addChild(obj);
        });

        container.appendTo("body");

      });
    });
  </script>
</head>

<body>
  <div id="hello">No/yes</div>
</body>

</html>