html to javascript is very important for front-end and backend developers
Years ago I had to write every single line of code without thinking about time, but now once your hourly rate is about $100 every second’s count and you need to think about productive ways to achieve nice work, we are going to give you some tools in order to work with ajax and json and convert from html code into javascript.
1- codebeautify Build String html to javascript
https://codebeautify.org/string-builder
<ul id="submenu_89" class="dropdown-menu sub_menu" role="menu" style="display: block;">
<a style="float:none; display: inline-block" class="col-lg-3 col-md-3 col-sm-6 col-xs-6 pad-bottom pad-right-0 cat_row cat_row_listing" href="/index.php/public/kuwait/ar/categories/listings/801/للبيع عقار ">
<div class="thumbnail">
<img class="img-responsive" itemprop="logo" src="https://d3cxve53lbqhxv.cloudfront.net/images/cat_image/base_801.png" alt="للبيع عقار ">
<div class="caption text-center">
<h5 class="text-right margin-bottom-0"><span itemprop="name">للبيع عقار </span></h5>
</div>
</div>
</a>
</ul>
var x = ' <ul id="submenu_89" class="dropdown-menu sub_menu" role="menu" style="display: block;"> ' + ' <a style="float:none; display: inline-block" class="col-lg-3 col-md-3 col-sm-6 col-xs-6 pad-bottom pad-right-0 cat_row cat_row_listing" href="/index.php/public/kuwait/ar/categories/listings/801/للبيع عقار "> ' + ' <div class="thumbnail"> ' + ' <img class="img-responsive" itemprop="logo" src="https://d3cxve53lbqhxv.cloudfront.net/images/cat_image/base_801.png" alt="للبيع عقار "> ' + ' <div class="caption text-center"> ' + ' <h5 class="text-right margin-bottom-0"><span itemprop="name">للبيع عقار </span></h5> ' + ' </div> ' + ' </div> ' + ' </a> ' + ' </ul> ' ;
2- json editor and json parser
{
"menu_mode": "categories",
"listingscategories": [
{
"term_id": 2201,
"name": "Asian Cars",
"slug": "asian-cars",
"cat_ID": 2201,
"category_count": 2,
"cat_name": "Asian Cars",
"category_nicename": "asian-cars",
"category_parent": 2185,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2018\/10\/asian-cars.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/asian-cars\/",
"sub": [
{
"term_id": 3861,
"name": "Nissan",
"slug": "nissan",
"cat_ID": 3861,
"category_count": 0,
"cat_name": "Nissan",
"category_nicename": "nissan",
"category_parent": 2201,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/نيسان.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/nissan\/",
"subofsubs": [
]
},
{
"term_id": 3863,
"name": "Honda",
"slug": "honda",
"cat_ID": 3863,
"category_count": 0,
"cat_name": "Honda",
"category_nicename": "honda",
"category_parent": 2201,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/هوندا.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/honda\/",
"subofsubs": [
]
},
{
"term_id": 3865,
"name": "Hundai",
"slug": "hundai",
"cat_ID": 3865,
"category_count": 0,
"cat_name": "Hundai",
"category_nicename": "hundai",
"category_parent": 2201,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/هيونداي.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/hundai\/",
"subofsubs": [
]
},
{
"term_id": 3867,
"name": "Mitsubishi",
"slug": "mitsubishi",
"cat_ID": 3867,
"category_count": 0,
"cat_name": "Mitsubishi",
"category_nicename": "mitsubishi",
"category_parent": 2201,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/متسوبيشي.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/mitsubishi\/",
"subofsubs": [
]
},
{
"term_id": 3869,
"name": "Toyota",
"slug": "toyota",
"cat_ID": 3869,
"category_count": 0,
"cat_name": "Toyota",
"category_nicename": "toyota",
"category_parent": 2201,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/تويوتا.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/toyota\/",
"subofsubs": [
]
},
{
"term_id": 3871,
"name": "KIA",
"slug": "kia",
"cat_ID": 3871,
"category_count": 0,
"cat_name": "KIA",
"category_nicename": "kia",
"category_parent": 2201,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/كيا.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/kia\/",
"subofsubs": [
]
},
{
"term_id": 3873,
"name": "Mazda",
"slug": "mazda",
"cat_ID": 3873,
"category_count": 0,
"cat_name": "Mazda",
"category_nicename": "mazda",
"category_parent": 2201,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/مازدا.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/mazda\/",
"subofsubs": [
]
},
{
"term_id": 3875,
"name": "Lexus",
"slug": "lexus",
"cat_ID": 3875,
"category_count": 0,
"cat_name": "Lexus",
"category_nicename": "lexus",
"category_parent": 2201,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/لكزس.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/lexus\/",
"subofsubs": [
]
},
{
"term_id": 3877,
"name": "Suzuki",
"slug": "suzuki",
"cat_ID": 3877,
"category_count": 0,
"cat_name": "Suzuki",
"category_nicename": "suzuki",
"category_parent": 2201,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/سوزوكي.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/suzuki\/",
"subofsubs": [
]
},
{
"term_id": 3879,
"name": "Subaru",
"slug": "subaru",
"cat_ID": 3879,
"category_count": 0,
"cat_name": "Subaru",
"category_nicename": "subaru",
"category_parent": 2201,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/سوبارو.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/subaru\/",
"subofsubs": [
]
},
{
"term_id": 3881,
"name": "Infiniti",
"slug": "infiniti",
"cat_ID": 3881,
"category_count": 0,
"cat_name": "Infiniti",
"category_nicename": "infiniti",
"category_parent": 2201,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/انفنتي.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/infiniti\/",
"subofsubs": [
]
},
{
"term_id": 3883,
"name": "Isuzu",
"slug": "isuzu",
"cat_ID": 3883,
"category_count": 0,
"cat_name": "Isuzu",
"category_nicename": "isuzu",
"category_parent": 2201,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/ايسوزو.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/isuzu\/",
"subofsubs": [
]
},
{
"term_id": 3886,
"name": "BAIC",
"slug": "baic",
"cat_ID": 3886,
"category_count": 0,
"cat_name": "BAIC",
"category_nicename": "baic",
"category_parent": 2201,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/بايك.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/baic\/",
"subofsubs": [
]
}
]
},
{
"term_id": 2203,
"name": "American Cars",
"slug": "american-cars",
"cat_ID": 2203,
"category_count": 3,
"cat_name": "American Cars",
"category_nicename": "american-cars",
"category_parent": 2185,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2018\/10\/american-cars.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/american-cars\/",
"sub": [
]
},
{
"term_id": 2205,
"name": "European Cars",
"slug": "european-cars",
"cat_ID": 2205,
"category_count": 0,
"cat_name": "European Cars",
"category_nicename": "european-cars",
"category_parent": 2185,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2018\/10\/european-cars.png",
"category_image": "https:\/\/example.com\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png",
"category_link": "https:\/\/example.com\/en\/job-category\/european-cars\/",
"sub": [
]
},
{
"term_id": 2207,
"name": "Classic Cars",
"slug": "classic-cars",
"cat_ID": 2207,
"category_count": 0,
"cat_name": "Classic Cars",
"category_nicename": "classic-cars",
"category_parent": 2185,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2018\/10\/classic-cars.png",
"category_image": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/classic-150x150.png",
"category_link": "https:\/\/example.com\/en\/job-category\/classic-cars\/",
"sub": [
]
},
{
"term_id": 2209,
"name": "Buses",
"slug": "buses",
"cat_ID": 2209,
"category_count": 0,
"cat_name": "Buses",
"category_nicename": "buses",
"category_parent": 2185,
"category_icon": "https:\/\/example.com\/wp-content\/uploads\/2018\/10\/buses.png",
"category_image": "https:\/\/example.com\/wp-content\/uploads\/2019\/02\/buss-150x150.png",
"category_link": "https:\/\/example.com\/en\/job-category\/buses\/",
"sub": [
]
}
],
"featured_categories": [
{
"term_id": 1,
"name": "Uncategorized"
}
]
}
See it in action
var settings = {
"async": true,
"crossDomain": true,
"url": "https://example.com/getcategoriesbycatid/"+5+"?lang="+getLangCode,
"method": "GET",
"headers": {
"apikey": "YTExMWIxZGZGZjODZlYjdmMQ==",
"cache-control": "no-cache",
"postman-token": "e84bc588-9456-2703-fc03-bdb97b701c09"
}
};
$.ajax(settings).done(function (response) {
result = JSON.parse(response);
console.log(result);
var html = ' <ul id="submenu_89" class="dropdown-menu sub_menu" role="menu" style="display: block;"> ';
for (var i of result['listingscategories']) {
var hreef = "";
if(i["countchildrencats"] > 0 ){
hreef =' <a style="float:right; display: block" class="col-lg-3 col-md-3 col-sm-6 col-xs-6 pad-bottom pad-right-0 cat_row cat_row_listing subitemizer" subcount="1" href="javascript:void(0);" data-target="'+ i["term_id"]+'" > ';
}else{
hreef =' <a style="float:right; display: block" class="col-lg-3 col-md-3 col-sm-6 col-xs-6 pad-bottom pad-right-0 cat_row cat_row_listing " href="https://example.com/'+getLangCode+'/ads/?search_categories%5B%5D='+ i["term_id"]+'" >';
}
//countchildrencats > 0
html += hreef +
' <div class="thumbnail"> ' +
' <img class="img-responsive" itemprop="logo" src="'+i["category_icon"]+'" alt="'+i["name"]+' "> ' +
' <div class="caption text-center"> ' +
' <h5 class="text-center margin-bottom-0" style=" font-size: 1em !important;"><span itemprop="name">'+i["name"]+'</span></h5> ' +
' </div> ' +
' </div> ' +
' </a> ' ;
}
html += ' </ul> ' ;
// alert(result['listingscategories'][0]["name"]);
$("#my-popup-content").html(html);
$("#loading").hide();
$("#my-popup-content").show();
intUI();
if (result == 0) return false;
return true;
});
}
Leave a Reply