I have a table that is coming from plugin called dataTables and the corresponding data is coming from external json 'members.json'.Everything is working fine but I want to put a search icon inside search textbox just before placeholder and when I key up it should hide and again it should visible when key down completion same as like placeholder.Can anyone please help me on it.Below is my code.
HTML
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
</head>
<body>
<div class="col-md-12">
</div>
<div id="div">
<div>
<table id="example">
<thead>
<tr>
<th>name</th>
<th>stargazerscount</th>
<th>forkscount</th>
<th>description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript" charset="utf8" src="js/script.js"></script>
</div>
</div>
</body>
script.js
$('#example').DataTable( {
language: {
searchPlaceholder: "Search records"
},
"ajax": {
"type" : "POST",
"url": "http://localhost/js/members.json",
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : '<span onclick="f()">'+json[i].stargazerscount+'</span>',
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
members.json
[{
"name": "mango",
"stargazerscount": 526,
"forkscount": "critical",
"description": "fruits"
},
{
"name": "brinjal",
"stargazerscount": 526,
"forkscount": "critical",
"description": "vagetables"
},
{
"name": "grapes",
"stargazerscount": 526,
"forkscount": "major",
"description": "fruits"
},
{
"name": "soap",
"stargazerscount": 526,
"forkscount": "major",
"description": "groceries"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
}
]
You can actually, manipulate the DOM of Datatables and add an id or class. Basically, you assign an id to the filter DOM then use css.
For example:
$(document).ready( function () {
var table = $('#example').DataTable({
language: {
searchPlaceholder: "Search records"
},
"dom": "<'#searchid'f>trip"
});
} );
$( window ).on( "load", function(){
$("#searchid :input").addClass('empty');
} );
$(document).on('keyup','#searchid :input', function() {
var input = $("#searchid :input");
if(input.val().length === 0) {
input.removeClass('no-icon');
input.addClass('empty');
} else {
input.removeClass('empty');
input.addClass('no-icon')
}
});
You can manipulate the CSS below:
input.empty {
background-image: url(https://cdn4.iconfinder.com/data/icons/iconic/raster/16/magnifying_glass_alt.png);
background-position: 10px center;
background-repeat: no-repeat;
border: 1px solid #ccc;
padding: 5px 5px 5px 10px;
text-indent: 20px;
width: 200px;
}
input.no-icon{
padding: 5px 5px 5px 10px;
width: 200px;
}
Take a look at this example I made.
Related
I am running this GET API query in Postman - https://[myDomain].atlassian.net/wiki/rest/api/space/ which returns the below results.
However, I'd like to filter out the results to display or return only some specific data, e.g. only the id, key, name, homepage and webui values. How can I achieve this in Postman?
{
"results": [
{
"id": 98430,
"key": "DOC",
"name": "Documents",
"type": "global",
"status": "current",
"_expandable": {
"settings": "/rest/api/space/DOC/settings",
"metadata": "",
"operations": "",
"lookAndFeel": "/rest/api/settings/lookandfeel?spaceKey=DOC",
"identifiers": "",
"permissions": "",
"icon": "",
"description": "",
"theme": "/rest/api/space/DOC/theme",
"history": "",
"homepage": "/rest/api/content/98633"
},
"_links": {
"webui": "/spaces/DOC",
"self": "https://xxxxxx.atlassian.net/wiki/rest/api/space/DOC"
}
},
{
"id": 425986,
"key": "~63be918f98bf50328c68aec2",
"name": "MyDocs",
"type": "personal",
"status": "current",
"_expandable": {
"settings": "/rest/api/space/~63be918f98bf50328c68aec2/settings",
"metadata": "",
"operations": "",
"lookAndFeel": "/rest/api/settings/lookandfeel?spaceKey=~63be918f98bf50328c68aec2",
"identifiers": "",
"permissions": "",
"icon": "",
"description": "",
"theme": "/rest/api/space/~63be918f98bf50328c68aec2/theme",
"history": "",
"homepage": "/rest/api/content/426171"
},
"_links": {
"webui": "/spaces/~63be918f98bf50328c68aec2",
"self": "https://xxxxxx.atlassian.net/wiki/rest/api/space/~63be918f98bf50328c68aec2"
}
},
{
"id": 2064386,
"key": "~5f7af04cb61f66006f28fafc",
"name": "Content Management",
"type": "personal",
"status": "current",
"_expandable": {
"settings": "/rest/api/space/~5f7af04cb61f66006f28fafc/settings",
"metadata": "",
"operations": "",
"lookAndFeel": "/rest/api/settings/lookandfeel?spaceKey=~5f7af04cb61f66006f28fafc",
"identifiers": "",
"permissions": "",
"icon": "",
"description": "",
"theme": "/rest/api/space/~5f7af04cb61f66006f28fafc/theme",
"history": "",
"homepage": "/rest/api/content/2064576"
},
"_links": {
"webui": "/spaces/~5f7af04cb61f66006f28fafc",
"self": "https://xxxxxx.atlassian.net/wiki/rest/api/space/~5f7af04cb61f66006f28fafc"
}
},
{
"id": 98306,
"key": "~5f7aef9c8d88b300751faba5",
"name": "AI Development",
"type": "personal",
"status": "current",
"_expandable": {
"settings": "/rest/api/space/~5f7aef9c8d88b300751faba5/settings",
"metadata": "",
"operations": "",
"lookAndFeel": "/rest/api/settings/lookandfeel?spaceKey=~5f7aef9c8d88b300751faba5",
"identifiers": "",
"permissions": "",
"icon": "",
"description": "",
"theme": "/rest/api/space/~5f7aef9c8d88b300751faba5/theme",
"history": "",
"homepage": "/rest/api/content/98389"
},
"_links": {
"webui": "/spaces/~5f7aef9c8d88b300751faba5",
"self": "https://xxxxxx.atlassian.net/wiki/rest/api/space/~5f7aef9c8d88b300751faba5"
}
},
{
"id": 229380,
"key": "SD",
"name": "Software Development",
"type": "global",
"status": "current",
"_expandable": {
"settings": "/rest/api/space/SD/settings",
"metadata": "",
"operations": "",
"lookAndFeel": "/rest/api/settings/lookandfeel?spaceKey=SD",
"identifiers": "",
"permissions": "",
"icon": "",
"description": "",
"theme": "/rest/api/space/SD/theme",
"history": "",
"homepage": "/rest/api/content/229464"
},
"_links": {
"webui": "/spaces/SD",
"self": "https://xxxxxx.atlassian.net/wiki/rest/api/space/SD"
}
}
],
"start": 0,
"limit": 25,
"size": 5,
"_links": {
"base": "https://xxxxxx.atlassian.net/wiki",
"context": "/wiki",
"self": "https://xxxxxx.atlassian.net/wiki/rest/api/space/"
}
}
IMO, you can't directly filter results to show in postman response tab.
However, you can achieve your goals by 2 work-arounds.
Use visualization function:
Put this code to your Tests tab
var template = `
<table bgcolor="#FFFFFF">
<tr>
<th>id</th>
<th>key</th>
<th>name</th>
<th>homepage</th>
<th>webui</th>
</tr>
{{#each response}}
<tr>
<td>{{id}}</td>
<td>{{key}}</td>
<td>{{name}}</td>
<td>{{_expandable.homepage}}</td>
<td>{{_links.webui}}</td>
</tr>
{{/each}}
</table>
`;
pm.visualizer.set(template, {
response: pm.response.json().results
});
Use logging function:
Put this code to your Tests tab
const res = pm.response.json().results;
res.forEach(e => {
let x = {
"id": e.id,
"key": e.key,
"name": e.name,
"homepage": e._expandable.homepage,
"webuid": e._links.webui
}
console.log(x)
})
I have generated the swagger JSON file below using "swagger-autogen"
{
"swagger": "2.0",
"info": {
"version": "0.0.0",
"title": "api-impact",
"description": "Documentation automatically generated by the <b>swagger-autogen</b> module."
},
"host": "localhost:3000",
"basePath": "/v1",
"tags": [
{
"name": "CRUD",
"description": "Endpoints classic CRUD"
},
{
"name": "Search",
"description": "Different search strategy to get equipements"
},
{
"name": "Utils",
"description": "Utils endpoints"
}
],
"schemes": [
"http",
"https"
],
"consumes": [
"application/json"
],
"produces": [
"application/json"
],
"paths": {
"/v1/equipement/CRUD/": {
"post": {
"tags": [
"CRUD"
],
"description": "create an equipement",
"parameters": [
{
"name": "id",
"type": "string",
"required": true,
"in": "query"
},
{
"name": "equipement",
"in": "body",
"required": true,
"description": "equipement",
"schema": {
"$ref": "#/definitions/Equipement"
}
}
],
"responses": {
"200": {
"description": "OK",
"schema": {
"$ref": "#/definitions/Equipement"
}
},
"400": {
"description": "Bad Request"
}
}
}
},
"/v1/equipement/CRUD/{id}": {
"put": {
"tags": [
"CRUD"
],
"description": "modify the equipement by the id",
"parameters": [
{
"name": "id",
"in": "path",
"required": true,
"type": "string"
},
{
"name": "equipement",
"in": "body",
"required": true,
"description": "equipement",
"schema": {
"$ref": "#/definitions/Equipement"
}
}
],
"responses": {
"200": {
"description": "OK",
"schema": {
"$ref": "#/definitions/Equipement"
}
},
"400": {
"description": "Bad Request"
}
}
},
"delete": {
"tags": [
"CRUD"
],
"description": "delete an equipement by its id",
"parameters": [
{
"name": "id",
"in": "path",
"required": true,
"type": "string"
}
],
"responses": {
"200": {
"description": "OK",
"schema": {
"$ref": "#/definitions/Equipement"
}
},
"400": {
"description": "Bad Request"
}
}
},
"get": {
"tags": [
"CRUD"
],
"description": "Get the equipement by the id",
"parameters": [
{
"name": "id",
"in": "path",
"required": true,
"type": "string"
}
],
"responses": {
"200": {
"description": "Equipement with the specified id ",
"schema": {
"$ref": "#/definitions/Equipement"
}
},
"400": {
"description": "Bad Request"
}
}
}
},
"/v1/equipement/search/all": {
"get": {
"tags": [
"Search"
],
"description": "Get all equipement in the database",
"parameters": [],
"responses": {
"200": {
"description": "Array of all the equipements",
"schema": {
"type": "array",
"items": {
"$ref": "#/definitions/Equipement"
},
"xml": {
"name": "main"
}
}
},
"400": {
"description": "Bad Request"
}
}
}
},
"/v1/equipement/search/mongo_query": {
"get": {
"tags": [
"Search"
],
"description": "Access equipements with a mongoDB find query passed in body",
"parameters": [
{
"name": "obj",
"in": "body",
"required": true,
"description": "Mongo Query",
"schema": {
"type": "object",
"properties": {}
}
}
],
"responses": {
"200": {
"description": "Array of the equipements returned by the mongo query",
"schema": {
"type": "array",
"items": {
"$ref": "#/definitions/Equipement"
},
"xml": {
"name": "main"
}
}
},
"400": {
"description": "Bad Request"
}
}
}
},
"/v1/equipement/search/text": {
"get": {
"tags": [
"Search"
],
"description": "Search equipement via a text query on name and brand",
"parameters": [
{
"name": "n",
"description": "Number of results wanted",
"required": false,
"type": "number",
"in": "query"
},
{
"name": "searchString",
"description": "search text query",
"required": true,
"type": "string",
"in": "query"
}
],
"responses": {
"200": {
"description": "Array of the equipements returned by the text query",
"schema": {
"type": "array",
"items": {
"$ref": "#/definitions/Equipement"
},
"xml": {
"name": "main"
}
}
},
"400": {
"description": "Bad Request"
}
}
}
},
"/v1/equipement/search/query_param": {
"get": {
"tags": [
"Search"
],
"description": "Access equipements by parameters",
"parameters": [
{
"name": "type",
"type": "string",
"in": "query"
},
{
"name": "brand",
"type": "string",
"in": "query"
},
{
"name": "segmentation",
"in": "query",
"type": "string"
}
],
"responses": {
"200": {
"description": "Array of the equipements returned by the parameter query",
"schema": {
"type": "array",
"items": {
"$ref": "#/definitions/Equipement"
},
"xml": {
"name": "main"
}
}
},
"400": {
"description": "Bad Request"
}
}
}
},
"/v1/equipement/utils/getAllBrands": {
"get": {
"tags": [
"Utils"
],
"description": "Return all the existing brands",
"parameters": [],
"responses": {
"200": {
"description": "Array of the brand names",
"schema": {
"type": "array",
"example": [
"string"
],
"items": {
"type": "string"
},
"xml": {
"name": "main"
}
}
},
"400": {
"description": "Bad Request"
}
}
}
},
"/v1/equipement/utils/getAllTypes": {
"get": {
"tags": [
"Utils"
],
"description": "Return all the existing type of equipement",
"parameters": [],
"responses": {
"200": {
"schema": {
"type": "array",
"example": [
"string"
],
"items": {
"type": "string"
},
"xml": {
"name": "main"
}
},
"description": "Array of the equipements type"
}
}
}
},
"/v1/equipement/utils/getAllSegmentation": {
"get": {
"tags": [
"Utils"
],
"description": "Return all the existing segmentation of equipement",
"parameters": [],
"responses": {
"200": {
"schema": {
"type": "array",
"example": [
"string"
],
"items": {
"type": "string"
},
"xml": {
"name": "main"
}
},
"description": "Array of the equipements segmentation"
}
}
}
}
},
"definitions": {
"Equipement": {
"type": "object",
"properties": {
"name": {
"type": "string",
"example": "Dell Vostro"
},
"type": {
"type": "string",
"example": "Ordinateur"
},
"brand": {
"type": "string",
"example": "Dell"
},
"segementation": {
"type": "string",
"example": "Portable"
},
"descritpion": {
"type": "string",
"example": " ... "
},
"date_modify": {
"type": "string",
"example": "2012-04-23T00:00:00.000Z"
},
"impact_cc": {
"type": "object",
"properties": {
"type": {
"type": "string",
"example": "cc"
},
"unit": {
"type": "string",
"example": "Kg CO2 eq."
},
"cradle_to_gate_impact": {
"type": "number",
"example": 30
},
"gate_to_grave_impact": {
"type": "number",
"example": 40
},
"transport_impact": {
"type": "number",
"example": 45
},
"use_impact": {
"type": "number",
"example": 32
},
"eof_impact": {
"type": "number",
"example": 12
},
"margin_error": {
"type": "number",
"example": 12
},
"year_usage": {
"type": "number",
"example": 4
},
"methodology": {
"type": "string",
"example": "test"
},
"use_methodology": {
"type": "string",
"example": "none"
},
"source": {
"type": "string",
"example": "dede"
},
"impact_factor": {
"type": "string",
"example": "55"
},
"date_publication": {
"type": "string",
"example": "2012-04-23T00:00:00.000Z"
}
}
}
}
}
}
}
When i use "swagger-ui-express" to display it, it works on my localhost. But when installed on a server, the swagger page is blank (even when curled from the server itself).
app.use('/doc', swaggerUi.serve, swaggerUi.setup(swaggerFile));
Blank page :
<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="./swagger-ui.css" >
<link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" /><link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
<style>
html
{
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after
{
box-sizing: inherit;
}
body {
margin:0;
background: #fafafa;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
<defs>
<symbol viewBox="0 0 20 20" id="unlocked">
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
</symbol>
<symbol viewBox="0 0 20 20" id="locked">
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z"/>
</symbol>
<symbol viewBox="0 0 20 20" id="close">
<path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z"/>
</symbol>
<symbol viewBox="0 0 20 20" id="large-arrow">
<path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z"/>
</symbol>
<symbol viewBox="0 0 20 20" id="large-arrow-down">
<path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z"/>
</symbol>
<symbol viewBox="0 0 24 24" id="jump-to">
<path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z"/>
</symbol>
<symbol viewBox="0 0 24 24" id="expand">
<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
</symbol>
</defs>
</svg>
<div id="swagger-ui"></div>
<script src="./swagger-ui-bundle.js"> </script>
<script src="./swagger-ui-standalone-preset.js"> </script>
<script src="./swagger-ui-init.js"> </script>
<style>
.swagger-ui .topbar .download-url-wrapper { display: none } undefined
</style>
</body>
</html>
Thank you in advance if you have some clues how to resolve this
I have added the below Schema JSON code for SiteNavigationElemen on the section but this one is not fetching on https://search.google.com/test/rich-results. I want to show on Google search result. Could you please guide me this one code is correct or not.
<script type="application/ld+json">
{
"#context": "https://schema.org",
"#graph":
[
{
"#context": "https://schema.org",
"#type":"SiteNavigationElement",
"#id":"#table-of-contents",
"name": "EX",
"url": "https://example1.com"
},
{
"#context": "https://schema.org",
"#type":"SiteNavigationElement",
"#id":"#table-of-contents",
"name": "EX",
"url": "https://example1.com"
},
{
"#context": "https://schema.org",
"#type":"SiteNavigationElement",
"#id":"#table-of-contents",
"name": "EX",
"url": "https://example1.com"
},
{
"#context": "https://schema.org",
"#type":"SiteNavigationElement",
"#id":"#pagination",
"name": "EX",
"url": "https://example1.com"
},
{
"#context": "https://schema.org",
"#type":"SiteNavigationElement",
"#id":"#pagination",
"name": "EX",
"url": "https://example1.com"
}
]
}
</script>
Heena, it is because https://developers.google.com/search/docs/advanced/structured-data/video
There are only specific schemas that show up in rich results, but more work. They just won't work with that testing tool. I recommend https://validator.schema.org/
This is the result that i want, want it to separate into group with starting letter
Here is the data
{
{ "id": "61", "name": "1028 Visual Therapy", "slug": "1028-visual-therapy", "__typename": "Brand" }
{ "id": "51", "name": "3W Clinic", "slug": "3w-clinic", "__typename": "Brand" }
{ "id": "128", "name": "A. By BOM", "slug": "a-by-bom", "__typename": "Brand" }
{ "id": "96", "name": "ACTIMED", "slug": "actimed", "__typename": "Brand" }
{ "id": "123", "name": "Always be Pure", "slug": "always-be-pure", "__typename": "Brand" }
{ "id": "28", "name": "AMPM", "slug": "ampm", "__typename": "Brand" }
{ "id": "3", "name": "Angel Key", "slug": "angel-key", "__typename": "Brand" }
{ "id": "99", "name": "Annie's Way", "slug": "annies-way", "__typename": "Brand" }
{ "id": "67", "name": "APRIL SKIN", "slug": "april-skin", "__typename": "Brand" }
{ "id": "126", "name": "Aurora D.", "slug": "aurora-d", "__typename": "Brand" }
{ "id": "124", "name": "AXIS-Y", "slug": "axis-y", "__typename": "Brand" }
}
Just use a computed to sort/group the items however you want:
Vue.component("SingleItem", {
props: ['item'],
template: `
<div
class="single-item"
>
{{ item.name }}
</div>
`
})
Vue.component("ItemGroup", {
props: ['group', 'char'],
template: `
<div>
<strong>{{ char }}</strong><br />
<div
class="d-grid"
>
<single-item
v-for="item in group"
:item="item"
></single-item>
</div>
<hr />
</div>
`
})
new Vue({
el: "#app",
data() {
return {
items: [{
"id": "61",
"name": "1028 Visual Therapy",
"slug": "1028-visual-therapy",
"__typename": "Brand"
},
{
"id": "51",
"name": "3W Clinic",
"slug": "3w-clinic",
"__typename": "Brand"
},
{
"id": "128",
"name": "A. By BOM",
"slug": "a-by-bom",
"__typename": "Brand"
},
{
"id": "96",
"name": "ACTIMED",
"slug": "actimed",
"__typename": "Brand"
},
{
"id": "123",
"name": "Always be Pure",
"slug": "always-be-pure",
"__typename": "Brand"
},
{
"id": "28",
"name": "AMPM",
"slug": "ampm",
"__typename": "Brand"
},
{
"id": "3",
"name": "Angel Key",
"slug": "angel-key",
"__typename": "Brand"
},
{
"id": "99",
"name": "Annie's Way",
"slug": "annies-way",
"__typename": "Brand"
},
{
"id": "67",
"name": "APRIL SKIN",
"slug": "april-skin",
"__typename": "Brand"
},
{
"id": "126",
"name": "Aurora D.",
"slug": "aurora-d",
"__typename": "Brand"
},
{
"id": "124",
"name": "AXIS-Y",
"slug": "axis-y",
"__typename": "Brand"
},
],
}
},
computed: {
itemsGroupedByFirstChar() {
return this.items.reduce((a, c) => {
if (typeof a[c.name.charAt(0)] === "undefined") a[c.name.charAt(0)] = []
a[c.name.charAt(0)].push(c)
return a
}, {})
}
},
template: `
<div>
<item-group
v-for="(val, key, i) in itemsGroupedByFirstChar"
:key="'group-'+ key + '-' + i"
:group="val"
:char="key"
></item-group>
</div>
`
})
.d-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.single-item {
padding: 8px 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
I'm trying to get all the user in jenkins by using api .
For example I hit the following command in postman and it is showing me all the jobs in jenkins .
Url = 192.168.195.150:8080/api/json?pretty=true
Result:
{
"_class": "hudson.model.Hudson",
"assignedLabels": [
{
"name": "master"
}
],
"mode": "NORMAL",
"nodeDescription": "the master Jenkins node",
"nodeName": "",
"numExecutors": 2,
"description": null,
"jobs": [
{
"_class": "hudson.model.FreeStyleProject",
"name": "Apache_kafka_Consumer_Info",
"url": "http://192.168.192.198:8080/job/Apache_kafka_Consumer_Info/",
"color": "blue"
},
{
"_class": "hudson.model.FreeStyleProject",
"name": "Apache_Kafka_Zookeeper_Start",
"url": "http://192.168.192.198:8080/job/Apache_Kafka_Zookeeper_Start/",
"color": "red"
},
{
"_class": "hudson.model.FreeStyleProject",
"name": "Apache_Kafka_Zookeeper_Status",
"url": "http://192.168.192.198:8080/job/Apache_Kafka_Zookeeper_Status/",
"color": "blue"
},
{
"_class": "hudson.model.FreeStyleProject",
"name": "AWS_Lambda",
"url": "http://192.168.192.198:8080/job/AWS_Lambda/",
"color": "blue"
},
{
"_class": "hudson.model.FreeStyleProject",
"name": "Input_Validation",
"url": "http://192.168.192.198:8080/job/Input_Validation/",
"color": "blue"
},
{
"_class": "hudson.model.FreeStyleProject",
"name": "loginserver-CI",
"url": "http://192.168.192.198:8080/job/loginserver-CI/",
"color": "blue"
},
{
"_class": "hudson.maven.MavenModuleSet",
"name": "loginserver-CI-1",
"url": "http://192.168.192.198:8080/job/loginserver-CI-1/",
"color": "blue"
},
{
"_class": "hudson.maven.MavenModuleSet",
"name": "loginserver-CI-2",
"url": "http://192.168.192.198:8080/job/loginserver-CI-2/",
"color": "blue"
},
{
"_class": "hudson.maven.MavenModuleSet",
"name": "loginserver-CI-3",
"url": "http://192.168.192.198:8080/job/loginserver-CI-3/",
"color": "blue"
},
{
"_class": "hudson.model.FreeStyleProject",
"name": "M_test",
"url": "http://192.168.192.198:8080/job/M_test/",
"color": "blue"
},
{
"_class": "hudson.model.FreeStyleProject",
"name": "parameter",
"url": "http://192.168.192.198:8080/job/parameter/",
"color": "blue"
},
{
"_class": "hudson.model.FreeStyleProject",
"name": "Remote_Deploy",
"url": "http://192.168.192.198:8080/job/Remote_Deploy/",
"color": "blue"
},
{
"_class": "hudson.model.FreeStyleProject",
"name": "Remote_Deploy_1",
"url": "http://192.168.192.198:8080/job/Remote_Deploy_1/",
"color": "blue"
},
{
"_class": "hudson.model.FreeStyleProject",
"name": "Tomcat_Status",
"url": "http://192.168.192.198:8080/job/Tomcat_Status/",
"color": "yellow"
},
{
"_class": "hudson.model.FreeStyleProject",
"name": "Version_Check",
"url": "http://192.168.192.198:8080/job/Version_Check/",
"color": "blue"
}
],
"overallLoad": {},
"primaryView": {
"_class": "hudson.model.AllView",
"name": "all",
"url": "http://192.168.192.198:8080/"
},
"quietingDown": false,
"slaveAgentPort": -1,
"unlabeledLoad": {
"_class": "jenkins.model.UnlabeledLoadStatistics"
},
"useCrumbs": true,
"useSecurity": true,
"views": [
{
"_class": "hudson.model.AllView",
"name": "all",
"url": "http://192.168.192.198:8080/"
}
]
}
How can I modify that Url so that I can list out all the users in Jenkins ?
It would be more better if it list out user permissions along with the jobs allocated to each user.
You can get the list of Users using below:-
https://<yourjenkins>/asynchPeople/api/xml?depth=1
Get all the Jenkins user using the below code in jenkinsfile:-
import hudson.model.User
User.getAll().each { user ->
println user
}
Please refer the link for more information:
You can use the api4jenkins python package
Get all users from Jenkins
relevant docs are here:
https://api4jenkins.readthedocs.io/en/latest/user/example.html#system