How to use Firefox's inbuilt json viewer in a web application that fetches content from a rest API and renders it below a search bar?
I have a simple search bar where I can search for text and get in return a json array as output from the backend server. The request is a simple get request. Now, I can directly query from the url parameters and see the whole json natively rendered by Firefox, but I really want to have a nice search box.
I was wondering if it is possible to somehow have ALL the inbuilt functionality of Firefox's native json viewer (like filtering) as part of the web application itself below the search bar?
I tried to search what js library Firefox uses to achieve this, but Google did not help at all. All I get are a bunch of extensions, which I do not want.
Right now this is as far as I got -
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
body{
background: #f2f2f2;
font-family: 'Open Sans', sans-serif;
}
.search {
width: 50%;
position: relative;
display: flex;
margin: auto;
}
.searchTerm {
width: 100%;
border: 3px solid #00B4CC;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
</style>
<div>
<div class="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button id="button" type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
<div id="result"></div>
</div>
</body>
<script>
$(document).ready(function(){
$("#button").click(function(){
$.ajax({
type: "GET",
dataType: "jsonp",
crossDomain: true,
url: "https://jsonplaceholder.typicode.com/posts",
success: function (result) {
var div = document.getElementById("#result");
console.log(result);
div.textContent = result;
div.html(result);
}
});
});
});
</script>
</html>
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Comments
Post a Comment