gql.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>GraphQL</title>
  6. </head>
  7. <body>
  8. <script>
  9. const gql=(url,query, variables)=>fetch(url, {method:"POST",headers:{'content-type':'application/json'}, body: JSON.stringify({query,variables})}).then(res=>res.json());
  10. (async ()=>{
  11. let data=await gql("http://shop-roles.asmer.fs.a-level.com.ua/graphql", `query cats($q:String){
  12. CategoryFind(query:$q){
  13. name goods{
  14. name images{
  15. url
  16. }
  17. }
  18. }
  19. }`, {q: "[{}]"});
  20. console.log(data);
  21. console.log(data.data)
  22. let div = document.createElement('div');
  23. for (const key in data.data) {
  24. for(let keys of data.data[key]){
  25. let p = document.createElement('h3');
  26. p.innerHTML=keys.name;
  27. div.append(p);
  28. if(Array.isArray(keys.goods)){
  29. for(let i of keys.goods){
  30. let p2=document.createElement('p');
  31. p2.style.marginLeft=50+'px';
  32. p2.innerHTML=' - '+i.name;
  33. div.append(p2);
  34. }
  35. }else{
  36. let p2=document.createElement('p');
  37. p2.innerHTML=' - '+keys.goods;
  38. }
  39. }
  40. }
  41. document.body.append(div);
  42. })();
  43. </script>
  44. </body>
  45. </html>