We Keep Coding

How to make jquery script easier to read? [duplicate]

This question already has answers here:
Decode obfuscated JavaScript
(4 answers)
Closed 11 months ago.
I hate to bring this here, while doing the learning of obfuscating the JS code, I encoded my code and then over wrote the orginal one without any backup :) Following is my obfuscated code.
var _0xf17f=["\x28","\x29","\x64\x69\x76","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x64","\x53\x74\x75\x64\x65\x6E\x74\x5F\x6E\x61\x6D\x65","\x73\x74\x75\x64\x65\x6E\x74\x5F\x64\x6F\x62","\x3C\x62\x3E\x49\x44\x3A\x3C\x2F\x62\x3E","\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x2F\x6C\x65\x61\x72\x6E\x69\x6E\x67\x79\x69\x69\x2F\x69\x6E\x64\x65\x78\x2E\x70\x68\x70\x3F\x72\x3D\x73\x74\x75\x64\x65\x6E\x74\x2F\x76\x69\x65\x77\x26\x61\x6D\x70\x3B\x20\x69\x64\x3D","\x22\x3E","\x3C\x2F\x61\x3E","\x3C\x62\x72\x2F\x3E","\x3C\x62\x3E\x53\x74\x75\x64\x65\x6E\x74\x20\x4E\x61\x6D\x65\x3A\x3C\x2F\x62\x3E","\x3C\x62\x3E\x53\x74\x75\x64\x65\x6E\x74\x20\x44\x4F\x42\x3A\x3C\x2F\x62\x3E","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x63\x6C\x61\x73\x73","\x76\x69\x65\x77","\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65","\x70\x72\x65\x70\x65\x6E\x64","\x2E\x69\x74\x65\x6D\x73","\x66\x69\x6E\x64","\x23\x53\x74\x75\x64\x65\x6E\x74\x47\x72\x69\x64\x56\x69\x65\x77\x49\x64"];function call_func(_0x41dcx2){var _0x41dcx3=eval(_0xf17f[0]+_0x41dcx2+_0xf17f[1]);var _0x41dcx4=document[_0xf17f[3]](_0xf17f[2]);var _0x41dcx5=_0x41dcx3[_0xf17f[4]];var _0x41dcx6=_0x41dcx3[_0xf17f[5]];var _0x41dcx7=_0x41dcx3[_0xf17f[6]];var _0x41dcx8=_0xf17f[7];_0x41dcx8+=_0xf17f[8]+_0x41dcx5+_0xf17f[9]+_0x41dcx5+_0xf17f[10];_0x41dcx8+=_0xf17f[11];_0x41dcx8+=_0xf17f[12];_0x41dcx8+=_0x41dcx6;_0x41dcx8+=_0xf17f[11];_0x41dcx8+=_0xf17f[13];_0x41dcx8+=_0x41dcx7;_0x41dcx8+=_0xf17f[11];_0x41dcx4[_0xf17f[14]]=_0x41dcx8;_0x41dcx4[_0xf17f[17]](_0xf17f[15],_0xf17f[16]);$(_0xf17f[21])[_0xf17f[20]](_0xf17f[19])[_0xf17f[18]](_0x41dcx4);} ;
Can anyone guide me the URL or any method to make it readable. I did this from this website and they seemingly provide on one way obfuscation services available on their website...this was my test code during a learning so would be greatful if anyone could help me out.

Here's a new automated tool, JSNice, to try to deobfuscate/deminify it. The tool even tries to guess the variable names, which is unbelievably cool. (It mines Javascript on github for this purpose.)
The tagline on the page is "Statistical renaming, Type inference and Deobfuscation".
http://www.jsnice.org

Try this:
http://jsbeautifier.org/
I tested with your code and worked as good as possible. =D

Here it is:
function call_func(input) {
var evaled = eval('(' + input + ')');
var newDiv = document.createElement('div');
var id = evaled.id;
var name = evaled.Student_name;
var dob = evaled.student_dob;
var html = '<b>ID:</b>';
html += '' + id + '';
html += '<br/>';
html += '<b>Student Name:</b>';
html += name;
html += '<br/>';
html += '<b>Student DOB:</b>';
html += dob;
html += '<br/>';
newDiv.innerHTML = html;
newDiv.setAttribute('class', 'view');
$('#StudentGridViewId').find('.items').prepend(newDiv);
};

From the first link on google;
function call_func(_0x41dcx2) {
var _0x41dcx3 = eval('(' + _0x41dcx2 + ')');
var _0x41dcx4 = document['createElement']('div');
var _0x41dcx5 = _0x41dcx3['id'];
var _0x41dcx6 = _0x41dcx3['Student_name'];
var _0x41dcx7 = _0x41dcx3['student_dob'];
var _0x41dcx8 = '<b>ID:</b>';
_0x41dcx8 += '' + _0x41dcx5 + '';
_0x41dcx8 += '<br/>';
_0x41dcx8 += '<b>Student Name:</b>';
_0x41dcx8 += _0x41dcx6;
_0x41dcx8 += '<br/>';
_0x41dcx8 += '<b>Student DOB:</b>';
_0x41dcx8 += _0x41dcx7;
_0x41dcx8 += '<br/>';
_0x41dcx4['innerHTML'] = _0x41dcx8;
_0x41dcx4['setAttribute']('class', 'view');
$('#StudentGridViewId')['find']('.items')['prepend'](_0x41dcx4);
};
It won't get you all the way back to source, and that's not really possible, but it'll get you out of a hole.

I have tried both of online jsbeautifier(jsbeautifier, jsnice),
these tools gave me beautiful js code,
but couldn't copy for very large js (must be bug, when i copy, copied buffer contains only one character '-').
I found that only working solution was prettyjs:
http://www.thaoh.net/prettyjs/

sending data from a search bar to a url

I am having trouble. So I need to get data from an api. I have a search bar and the user needs to input the search bar to look up a super hero api.
How would I get data from a search bar and put in my url all in a .click function.
var userInput;
var url;
var test;
//https://superheroapi.com/api/10215865526738981
$(document).ready(function () {
// when the user types in the data and clicks the button
$(btn1).click(function () {
// this is where the search bar is
userInput = document.getElementById('mySearch').innerHTML;
});
url = 'https://www.superheroapi.com/api.php/10215865526738981/search/batman' + userInput;
// here is where the api link in say type in batman
// and is should pop up with info about batman and
$.getJSON(url, function (data) {
var html = '';
$.each(data.results, function (i, demo) {
html += '<h2>' + demo.name + '</h2>';
//html += "<h2>" + demo.biography.alter-egos + "</h2>";
html += '<h2> Power Stats ' + demo.powerstats.combat + '</h2>';
html += '<p> Connections ' + demo.connections.relatives + '</p>';
html += '<p> appearance ' + demo.appearance.gender + '</p>';
html += '<h2> Work ' + demo.work.base + '</h2>';
html += ' Profile <img src ' + demo.image.url + '>';
});
$('#demo').html(html);
});
}
<p>
<input type="search" id="mySearch" name="mySearch">
<button id="btn1">Search</button>
<p id="demo"></p>
</p>

Here is something that works that you can use to compare with your code and make something out of it. I've used plain javascript and left comments what is going on so that you can learn from it.
There were few wrong assumptions in original question.
code was executing on page load and didn't wait for user input
url was hardcoded to start with batman + what ever user wrote
Code below is not perfect, but it is close enough to original code and it should be easy to understand. I also opted not to use jQuery, but you should be able to use it if wanted. Just replace getElementById with jQuery selectors and replace XMLHttpRequest with getJson.
I hope this helps you move ahead with your problem and that you will be able to learn something new which could help you better understand javascript. Happy coding!
var button = document.getElementById('btn1');
// when user clicks on button, we want to call function start search
button.addEventListener('click', startSearch);
function startSearch(event) {
// when we are starting the search, we want to pick up the value
// input field from user
var userInputValue = document.getElementById('mySearch').value;
// this is base API url on which we can add what user wanted
var urlBase = 'https://www.superheroapi.com/api.php/10215865526738981/search/'
// if user did not provide name in input, we want to stop executing
if (userInputValue === null || userInputValue === '') return;
// if we are still in this function, append what user typed onto urlBase
var searchUrl = urlBase + userInputValue;
// call function which actually executes the remote call
performSearch(searchUrl);
}
function performSearch(searchUrl) {
// this could be jQuery getJSON if you so prefer
// here it is vanila JS solution of how to get data via AJAX call
var requestData = new XMLHttpRequest();
// because AJAX is always async, we need to wait until file is loaded
// once it is loaded we want to call function handleResults
requestData.addEventListener('load', handleResults);
requestData.open('GET', searchUrl);
requestData.send();
}
function handleResults() {
// once we get response, because we used vanilla JS, we got response
// available in this context as "this.response", however it is type string
// we need to take that string and parse it into JSON
var responseJSON = JSON.parse(this.response);
// if there is error, we didn't find any character
if (responseJSON.error) console.log('Character not found');
else {
var html = '';
responseJSON.results.forEach(function (result) {
html += '<h2>' + result.name + '</h2>';
// html += "<h2>" + demo.biography.alter-egos + "</h2>";
html += '<h2>Power Stats ' + result.powerstats.combat + '</h2>';
html += '<p>Connections ' + result.connections.relatives + '</p>';
html += '<p>Appearance ' + result.appearance.gender + '</p>';
html += '<p>Work ' + result.work.base + '</p>';
// html += ' Profile <img src ' + result.image.url + '>';
})
// this is bad thing to do, injecting html like that into DOM
// but let's leave this lesson for later stage
// so, let's take this html and drop it onto the page
document.getElementById('demo').innerHTML = html;
}
}
<input type="search" id="mySearch" name="mySearch">
<button id="btn1">Search</button>
<div id="demo"></div>

const value = document.getElementById('mySearch').value;
And then use this value in your api url.

JavaScript Appending Rather Than Overwriting Using InnerHTML Property

So this is a weird one as every topic I've found on the subject has the exact opposite of my problem.
I'm using some JavaScript in SharePoint Online to replace the innerHTML of some elements, but whenever the function runs it is appending content rather than overwriting it.
I've tried the JS method of setting the innerHTML to something else first, then to the value (no luck), and also moving it to a jQuery call to set it. In both cases it does the same thing. Same problem observed on both Edge and Chrome.
Code is below - any ideas? (Have not included the whole script, just the specific function as it's quite a big script and the other bits are working as expected).
function getThisCompany() {
thisCompanyEnum = thisCompany.getEnumerator();
while (thisCompanyEnum.moveNext()) {
var currentCompany = thisCompanyEnum.get_current();
var thisCompanyId = currentCompany.get_item('ID');
var thisCompanyName = currentCompany.get_item('companyName');
var thisCompanyPhone = currentCompany.get_item('companyPhone');
var thisCompanyUrl = currentCompany.get_item('companyUrl');
var thisCompanyLogo = currentCompany.get_item('companyLogo');
// Check for a null value - if it is null console throws an error and stops the script, so load a default logo
if (thisCompanyLogo == null) {
thisCompanyLogo = "https://consiliumuk.sharepoint.com/POC/minicrm/CRM%20Images/nologo.png";
}
else {
thisCompanyLogo = thisCompanyLogo.get_url();
}
var thisCompanyAddress = currentCompany.get_item('companyAddress');
var thisCompanyMarkupBlock = "<table><tr><td colspan=2><b>";
thisCompanyMarkupBlock += thisCompanyName;
thisCompanyMarkupBlock += "</b></td></tr><tr><td colspan=1 valign=top><img height=100 width=100 src='";
thisCompanyMarkupBlock += thisCompanyLogo;
thisCompanyMarkupBlock += "' /></td><td colspan=1 valign=top>";
thisCompanyMarkupBlock += thisCompanyAddress;
thisCompanyMarkupBlock += "<p /><i>";
thisCompanyMarkupBlock += thisCompanyPhone;
thisCompanyMarkupBlock += "</i><br /><a href=";
thisCompanyMarkupBlock += thisCompanyUrl;
thisCompanyMarkupBlock += ">Visit company website</a></td></tr></table><p /><input id='loadExtended' type='button' value='Load' onClick='loadExtendedDetails(";
thisCompanyMarkupBlock += thisCompanyId;
thisCompanyMarkupBlock += ");' />";
alert(thisCompanyMarkupBlock);
//document.getElementById('detailsSpace').innerHTML = "Loading...";
//document.getElementById('detailsSpace').innerHTML = thisCompanyMarkupBlock;
jQuery("#detailsSpace").html(thisCompanyMarkupBlock);
}
}

Instead of using .html(), you can use clear and append, yo ensure your container is empty, something like:
jQuery("#detailsSpace").empty(); // Before while
while ([...]){
[...]
jQuery("#detailSpace").append(thisCompanyMarkupBlock); // Instead of html()
}

Found the problem - there was another function where because of a loop it was keeping the previous set of returned HTML when it got reprocessed. The jquery.empty() function was put in at the right place along with declaring the string null again, fixed now.

New Twitter Tweet Fetcher only showing 1 tweet

I am using the following code to show my latest tweets from the new twitter API. I've got it working perfectly, however, no matter what I do I can only get it to show one tweet, how can I make it show 5 tweets?
here is my code:
<script type="text/javascript">
var twitterFetcher=function(){var d=null;return{fetch:function(a,b){d=b;var c=document.createElement("script");c.type="text/javascript";c.src="http://cdn.syndication.twimg.com/widgets/timelines/"+a+"?&lang=en&callback=twitterFetcher.callback&suppress_response_codes=true&rnd="+Math.random() document.getElementsByTagName("head")[0].appendChild(c)},callback:function(a){var b=document.createElement("div");b.innerHTML=a.body;a=b.getElementsByClassName("e-entry- title");d(a)}}}();
twitterFetcher.fetch('345901443028488192', function(tweets){
// Do what you want with your tweets here! For example:
var x = tweets.length;
var n = 0;
var numtweets = 5;
var element = document.getElementById('tweets');
var html = '<ul id="tweetul">';
if (tweets[n].innerHTML) {
html += '<li><img src="images/myicon.png" class="twittericon"/>' + tweets[n].innerHTML + '</li>';
} else {
html += '<li><img src="images/myicon.png" class="twittericon"/>' + tweets[n].textContent + '</li>';
}
n++;
html += '</ul>';
element.innerHTML = html;
});
</script>

You are not looping. You increment n, but you're never going back to the code above it.

you can get a new version of the api here :
http://jasonmayes.com/projects/twitterApi/#sthash.CAN6FObk.dpbs
then you can write this :
twitterFetcher.fetch('345170787868762112', 'example1', 1, true);
change with "1" in the code above count of tweets you wanted.
I hope you could help.

Pass string from one function to the next javascript

I've got a simple JavaScript client that pulls from a REST API to present some book data, however I seem unable to call the function createBookRow(bookid) and return the appropriate html string to the document ready function where it is called,
The output is currently being produced correctly as verified by the append to .row-fluid on the html page, ideas or suggestions welcome
function createBookRow(bookid)
{
$.get('http://mysite.co.uk/atiwd/books/course/'+bookid+'/xml', function(xml){
$(xml).find('book').each(function(){
var $book = $(this);
var id = $book.attr("id");
var title = $book.attr("title");
var isbn = $book.attr("isbn");
var borrowedcount = $book.attr("borrowedcount");
var html = '<div class="span3"><img name="test" src="http://covers.openlibrary.org/b/isbn/'+isbn+'-L.jpg" width="32" height="32" alt=""></p>' ;
html += '<p> ' + title + '</p>' ;
html += '<p> ' + isbn + '</p>' ;
html += '<p> ' + borrowedcount + '</p>' ;
html += '</div>';
$('.row-fluid').append($(html));
});
});
}
$(document).ready(function()
{
$.get('xml/courses.xml', function(xml){
$(xml).find('course').each(function(){
var $course = $(this);
var id = $course.attr("id");
var title = $course.text();
var html = '<div class="span12"><p>' + title + '</p><row id="'+id+'" >'+createBookRow(id)+'</row></div>' ;
$('.row-fluid').append($(html));
$('.loadingPic').fadeOut(1400);
});
});
});

The line
var html = '<div class="span12"><p>' + title + '</p><row id="'+id+'" >'+createBookRow(id)+'</row></div>' ;
should be just
var html = '<div class="span12"><p>' + title + '</p><row id="'+id+'" ></row></div>' ;
createBookRow(id);
createBookRow(id) function is making a get request to get some details, which happens asynchronously. Unless you explicitly mention it is a synchronous call(which is not advised).
I guess the functionality you need is to render some rows for course and in between you need books details displayed. In that case you need to explicitly say where your book row needs to be appended.
$('.row-fluid').append($(html));
The above code will always append book row at the end.

You aren't returning anything in the code you provided. You just append some HTML to a jQuery object. Try adding a return statement
return html;