JavaScript/JQuery/HTML - Use output of one script as variable in another script

Question

I am making a small chrome extension. Its purpose is to make an API call to retrieve some JSON which is then stripped out to show only Name, Email & Team which is then presented to the user. The user then has the option to send that information to a slack channel via a button.

Everything works fine, my API call shows the correct information, My Webhook for slack works fine with a test message.

My issue is I dont know how to put whats returnd from my API call as variables to send to slack

$('.Name').html(data.user.name);
$('.Email').html(data.user.email);
$('.Teams').html(data.user.teams[0].name);

I.e.

var text = '$('.Name') + 'was contacted from' + $('.Teams') + 'Their email addres is' + $('.Email')''

Example slack message

John Smith was contacted from Sales Team Their email address is [email protected]

HTML

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <meta content="noindex, nofollow" name="robots">
    <meta content="noindex, nofollow" name="googlebot">
    <script src="jquery-git.js" type="text/javascript"></script>
    <script src='apicall.js'></script>
    <script src='slackapi.js'></script>
    <title>Call Logger</title>
</head>
<style>
</style>
<body>
<div class="container">  
  <form id="contact" action="" method="post">
    <h3>Call Logger</h3><br>
    <h2><div class="Name"></h2>
    <h2><div class="Address"></h2>
    <h2><div class="Teams"></h2>
    <h2><div class="Email"></div></h2>
    <h2><div class="Role"></div></h2>
    <br>
    <br>
    <fieldset>
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Send</button>
    </fieldset>
  </form>
</div>
</body>
</html>

apicall.js

function currentUrl() {
  return new Promise(function (resolve) {
    chrome.tabs.query({
      active: true,
      currentWindow: true
    }, function(tabs) {
      resolve(tabs[0].url)
    })
  })
}

function userIdfromUrl(url) {
  var parts = url.split('/')
  return parts[parts.length - 1]
}
var authorizationToken = "xxxxxxxxxxxxxxxxxxxxxxxxx";
function myapiRequest(endpoint, options) {
    $.ajax($.extend({}, {
    type: 'GET',
    dataType: "json",
    success: function(data) {
    $('.Name').html(data.user.name);
    $('.Email').html(data.user.email);
    $('.Teams').html(data.user.teams[0].name);
},

    url: "https://api.myapi.com/" + endpoint,
    headers: {
      "Authorization": "Token token=" + authorizationToken,
      "Accept": "application/vnd.myapi+json;version=2"
    }
  },
  options));
}
currentUrl()
  .then(function (url) {
    return userIdfromUrl(url)
  })
  .then(function (userId) {
    return myapiRequest('users/' + userId + '?include%5B%5D=contact_methods&include%5B%5D=teams')
  })
  .then(function (data) {
    console.log(data.user.name)
    console.log(data.user.email)
    console.log(data.user.teams[0].name)
  })

slackapi.js

$(document).ready(function(){
    $('#contact-submit').on('click',function(e){
        e.preventDefault();
        var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
        var text = 'This is a message'
        $.ajax({
            data: 'payload=' + JSON.stringify({
                "text": text // What I want to dynamically change
            }),
            dataType: 'json',
            processData: false,
            type: 'POST',
            url: url
        });
    });
});

Yin Cognyto · Accepted Answer · 2017-09-02 02:19:20Z

1

I obviously can't reproduce your setup, but, depending on what kind of pages are apicall.js and slackapi.js - there are some restrictions and particularities in the case of content/background pages -, I think you can send the text variable (or even its constituent parts, e.g. name, teams, email, using an array) to slackapi.js by message passing.

You send the message from apicall.js usually using chrome.runtime.sendMessage() (other options are available, depending on context), and you receive the message using a listener, e.g. chrome.runtime.onMessage.addListener(). For the message to be received, slackapi.js or any other JS file needs to run, so if it doesn't it needs to be injected using chrome.tabs.executeScript(), for example.

I'm not sure if this will help you, but at least I tried.

answered Sep 2, 2017 at 2:19

Yin Cognyto

1,1961 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript/JQuery/HTML - Use output of one script as variable in another script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related