Run Curl command in an HTML/JS application

Question

I have zero experience in API, JSON, Ajax, Curl, the most I learned in college was basic HTML, CSS, JS and PHP, I’ve killed myself searching and watching video, but with no one with experience to assist it is difficult, I’m almost giving up, I need some guidance.

I’m in a project where I have to take data from a site through their API and play in an HTML/JS application, following the steps of the API documentation (https://developer.zendesk.com/rest_api_docs/chat/apis#real-time-chat-api), I was able to pull the data through Curl, which generates a JSON for me, now I need to know how to make this request directly in this HTML/JS application, so that the data appears directly in the browser.

Anyone who can help, I really appreciate.

Edit: I used this Curl command

curl   https://rtm.zopim.com/stream/chats/active_chats \
-H "Authorization: Bearer xxxxxxxxxxxxxxxxxxxxxxx"

Answer 1

These are some steps that go from frontend to backend:

First you need the PHP script that makes the request for the API of this third party let’s call it chat.php and assume that you are staying with the domain https://meuexemplo.com.br/. So your appeal will be https://meuexemplo.com.br/chat.php

Chat file.php:

<?php
// Faz alguma coisa (requisições com cURL por exemplo) para conseguir o JSON que deve aparecer no HTML
$resultado = array(); // coloquei um array vazio, mas vamos pensar que ele contêm os dados que devem ser direcionados para o HTML
header('Content-Type: application/json');
echo json_encode($resultado);

Now that you have assembled the backend file that will feed your HTML/JS we go to Javascript, or better, let’s use the jQuery framework:

$(function(){
  $.ajax({
    url: 'https://meuexemplo.com.br/chat.php',
    dataType: 'json',
    success: function(data) {
      // A variável data contêm o JSON de resposta do seu backend.
      // Eu estou exemplificando que estamos acessando a chave 'teste' de data
      $('#resultado').html(data.test);
    }, error: function(err) {
      $('#resultado').html('Deu erro, porque não temos o backend neste exemplo');
    }
  });
});

<div id="resultado"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

With data in JSON format inside a variable in success from the $.ajax function you can use jQuery to insert the information into a table, div, ie any part of your HTML (frontend).

Although you use examples that are not real if you look at the process, you have a PHP script that recovers the data you need and it will be accessed through a Javascript with the method $.ajax jQuery. And, after AJAX has the data you use JS/jQuery to power your HTML interface.