How to loop through GraphQL data using either vanilla JavaScript or JQuery

How would I loop through this GraphQL data using either jQuery or Vanilla JavaScript?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$.post({
  url: 'https://api.graphcms.com/simple/v1/cjgp9rqoj21iq0176nzwwecoc',   
  data: JSON.stringify({ "query": " { allBlogs { id title description } } " }),
  contentType: 'application/json'
}).done(function(response) {
  //console.log('Fetched Blogs:', response);
  alert(JSON.stringify(response));  
});
</script>
</body>
</html>

Open in new window


( you can see the format of the returned GraphQL data in the JavaScript alert popup )

Please advise.

Thanks,
- Yvan
egoselfaxisAsked:
Who is Participating?
 
Julian HansenCommented:
This should do what you want.
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="results"></div>
<script>
$.post({
  url: 'https://api.graphcms.com/simple/v1/cjgp9rqoj21iq0176nzwwecoc',   
  data: JSON.stringify({ "query": " { allBlogs { id title description } } " }),
  contentType: 'application/json'
}).done(function(response) {
  var results = response.data ? response.data.allBlogs || [] : [];
  var container = $('#results');
  results.forEach(function(item) {
    var title = $('<p>', {class: 'title'}).html(item.title);
    var description = $('<div>', {class: 'description'}).html(item.description);
    container.append(title, description);
  });
});
</script>
</body>
</html>

Open in new window

EDIT: Changed map to forEach
0
 
leakim971PluritechnicianCommented:
}).done(function(response) {
    if(response.data && response.data && response.data.allBlogs)
         for(var i=0;i<response.data.allBlogs.length;i++) {
               var id = response.data.allBlogs[i].id;
               var title = response.data.allBlogs[i].title;
               var description = response.data.allBlogs[i].description;
               // do something with id, title,description
               alert("id: " + id + ", title: " + title + ", description: " + description);
         }
});
</script>
</body>
</html>

Open in new window

0
 
Julian HansenCommented:
Can simplify
if(response.data && response.data && response.data.allBlogs)

Open in new window

To
if(response.data && response.data.allBlogs)

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
egoselfaxisAuthor Commented:
Thanks for this!  I'm now seeing the expected data in the alert popup.  How would I output this data within the HTML page, though? When I try replacing the alert message with something like this ..

$(".title").html(title);   
 $(".description").html(description);

Open in new window


.. and then add some HTML to the body ..

<p class="title"></p>
<div class="description"></div>

Open in new window


.. obviously it's not working correctly, and is instead just displaying the data from the last row that's returned from the query.  My assumption is that I need to append to the DOM somehow.  Any idea how I'd accomplish something like that?

- Yvan
0
 
egoselfaxisAuthor Commented:
Thank you both!  I've now got this working exactly as I wanted.

- Yvan
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.