CODEWITHSUNDEEP
javascriptjqueryajax
OpenBayou
OpenBayou

Reputation: 15

How to change text in a value in an AJAX function?

Is there a way to change data you receive when you GET data from an API? I'm new at using AJAX to get API data from TikTok and can get the embed code. The problem I'm having to how to change data once you've gotten it. I've used .find() and .replaceWith() and I get an error message saying find is not a function and replacewith is not a function.

The code that you get back from TikTok API for embedding a video on your site looks like this:

<blockquote class="tiktok-embed">

and I need to change the class to call it something else:

<blockquote class="tiktok-video">

My code so far:

$('.btn').click(function() {
  
  $('.text').text('loading . . .');
  
  $.ajax({
    type:"GET",
    url:"https://www.tiktok.com/@fatcapsprays/video/7105385471500455174",
    success: function(data) {
      // Problem is here
      $('.text').text(JSON.stringify(data.html));
    },
    dataType: 'JSON',
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn">Click me!</button>
<p class="text">Code</p>

P.S. TikTok seems to be having problems accessing it's API as of this post for me.

Upvotes: 0

Views: 152

Answers (2)

caco
caco

Reputation: 1

search on google with key "jquery api". you can find anything provided api by author to manipulate your DOM.

On your problem, i think you can use api addClass function to manipulate class of DOM

https://api.jquery.com/

Upvotes: 0

Beyro
Beyro

Reputation: 119

You can replace the class name in the string using String.prototype.replace method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

Using your example:

  $.ajax({
    type:"GET",
    url:"https://www.tiktok.com/@fatcapsprays/video/7105385471500455174",
    success: function(data) {
      // Problem is here
      $('.text').text(JSON.stringify(data.html.replace('tiktok-embed', 'tiktok-video'));
    },
    dataType: 'JSON',
  });
});

p.s. - According to the TikTok documentation, you should be making your requests to https://www.tiktok.com/oembed?url=UrlToYourVideo not the direct video link See: https://developers.tiktok.com/doc/embed-videos

Upvotes: 1

Related Questions