We Keep Coding

How do i stop iterating tough this array at "pgn[46]"?

How do i stop iterating tough this array at "pgn[46]"?
I want to be unable to go to the next move when i click the button. because this array will start back from 0 and if a piece is on the square it will move again. i need some more text to post this question here. I love you all, peace
$('#move1Btn').on('click', function () {
board.move(pgn[intpgnIndex])
})
var pgn = new Array()
pgn[0] = ""
pgn[1] = "e2-e4"
pgn[2] = "e7-e5"
pgn[3] = "f2-f4"
pgn[4] = "e5-f4"
pgn[5] = "f1-c4"
pgn[6] = "d8-h4"
pgn[7] = "e1-f1"
pgn[8] = "b7-b5"
pgn[9] = "c4-b5"
pgn[10] = "g8-f6"
pgn[11] = "g1-f3"
pgn[12] = "h4-h6"
pgn[13] = "d2-d3"
pgn[14] = "f6-h5"
pgn[15] = "f3-h4"
pgn[16] = "h6-g5"
pgn[17] = "h4-f5"
pgn[18] = "c7-c6"
pgn[19] = "g2-g4"
pgn[20] = "h5-f6"
pgn[21] = "h1-g1"
pgn[22] = "c6-b5"
pgn[23] = "h2-h4"
pgn[24] = "g5-g6"
pgn[25] = "h4-h5"
pgn[26] = "g6-g5"
pgn[27] = "d1-f3"
pgn[28] = "f6-g8"
pgn[29] = "c1-f4"
pgn[30] = "g5-f6"
pgn[31] = "b1-c3"
pgn[32] = "f8-c5"
pgn[33] = "c3-d5"
pgn[34] = "f6-b2"
pgn[35] = "f4-d6"
pgn[36] = "c5-g1"
pgn[37] = "e4-e5"
pgn[38] = "b2-a1"
pgn[39] = "f1-e2"
pgn[40] = "b8-a6"
pgn[41] = "f5-g7"
pgn[42] = "e8-d8"
pgn[43] = "f3-f6"
pgn[44] = "g8-f6"
pgn[45] = "d6-e7"
pgn[46] = ""
pgn[47] = ""
pgn[48] = ""
pgn[49] = ""
var intpgnIndex = 0;
function writeThing() {
if ( intpgnIndex == pgn.length ) intpgnIndex = 0;
intpgnIndex++;
}

I would check the value at the index and see if it is an empty string:
$('#move1Btn').on('click', function () {
var move = pgn[intpgnIndex];
if (move) {
board.move(move);
}
})
Here is a recommended approach:
const initialState = [
{ color: 'black', type: 'king', cells: ['e8'] },
{ color: 'black', type: 'queen', cells: ['d8'] },
{ color: 'black', type: 'rook', cells: ['a8', 'h8'] },
{ color: 'black', type: 'bishop', cells: ['c8', 'f8'] },
{ color: 'black', type: 'knight', cells: ['b8', 'g8'] },
{ color: 'black', type: 'pawn', cells: ['a7', 'b7', 'c7', 'd7', 'e7', 'f7', 'g7', 'h7'] },
{ color: 'white', type: 'king', cells: ['e1'] },
{ color: 'white', type: 'queen', cells: ['d1'] },
{ color: 'white', type: 'rook', cells: ['a1', 'h1'] },
{ color: 'white', type: 'bishop', cells: ['c1', 'f1'] },
{ color: 'white', type: 'knight', cells: ['b1', 'g1'] },
{ color: 'white', type: 'pawn', cells: ['a2', 'b2', 'c2', 'd2', 'e2', 'f2', 'g2', 'h2'] },
];
const moveList = ['e2-e4', 'e7-e5', 'f2-f4', 'e5-f4', 'f1-c4', 'd8-h4', 'e1-f1', 'b7-b5', 'c4-b5', 'g8-f6', 'g1-f3', 'h4-h6', 'd2-d3', 'f6-h5', 'f3-h4', 'h6-g5', 'h4-f5', 'c7-c6', 'g2-g4', 'h5-f6', 'h1-g1', 'c6-b5', 'h2-h4', 'g5-g6', 'h4-h5', 'g6-g5', 'd1-f3', 'f6-g8', 'c1-f4', 'g5-f6', 'b1-c3', 'f8-c5', 'c3-d5', 'f6-b2', 'f4-d6', 'c5-g1', 'e4-e5', 'b2-a1', 'f1-e2', 'b8-a6', 'f5-g7', 'e8-d8', 'f3-f6', 'g8-f6', 'd6-e7'];
const
$board = $('.chess-board'),
$moveInfo = $('.move-info');
let currentIndex = 0;
const currentPlayer = () => currentIndex % 2 === 0 ? 'white' : 'black';
const generateBoard = () => {
for (let i = 0; i < 100; i++) {
const
row = Math.floor(i / 10),
col = i % 10,
isOdd = ((row % 2 === 1) ^ (col % 2 === 0)) === 0,
$cell = $('<div>', { class: 'cell' });
if (row === 0 || row === 9) {
$cell.addClass('boundry');
if (col > 0 && col < 9) {
$cell.attr('data-index', String.fromCharCode(97 + col - 1));
}
} else if (col === 0 || col === 9) {
$cell.addClass('boundry');
if (row > 0 && row < 9) {
$cell.attr('data-index', 9 - row);
}
} else {
const
dr = 10 - row - 1, dc = String.fromCharCode(97 + col - 1),
code = `${dc}${dr}`;
$cell.attr('data-code', code).toggleClass('is-odd', isOdd);
}
$board.append($cell);
}
};
const initializePieces = () => {
initialState.forEach(({ color, type, cells }) => {
cells.forEach(code => {
$board
.find(`.cell[data-code="${code}"]`)
.attr('data-type', type)
.attr('data-color', color);
});
});
};
const resetBoard = () => {
currentIndex = 0;
$board.find('.cell')
.removeAttr('data-color')
.removeAttr('data-type');
initializePieces();
$moveInfo.find('[data-move-index]').text('');
$moveInfo.find('[data-move-value]').text('');
$moveInfo.find('[data-move-atk-color]').text('');
$moveInfo.find('[data-move-atk-type]').text('');
$moveInfo.find('[data-move-def-color]').text('');
$moveInfo.find('[data-move-def-type]').text('');
};
const nextMove = () => {
let move = moveList[currentIndex];
if (!move) {
alert('No more moves, reseting...');
resetBoard();
return;
}
const [from, to] = move.split('-');
const $prev = $board.find(`.cell[data-code="${from}"]`);
const $curr = $board.find(`.cell[data-code="${to}"]`);
const atkColor = $prev.attr('data-color');
const atkType = $prev.attr('data-type');
const defColor = $curr.attr('data-color') || '';
const defType = $curr.attr('data-type') || '';
$moveInfo.find('[data-move-index]').text(currentIndex + 1);
$moveInfo.find('[data-move-value]').text(move);
$moveInfo.find('[data-move-atk-color]').text(atkColor);
$moveInfo.find('[data-move-atk-type]').text(atkType);
$moveInfo.find('[data-move-def-color]').text(defColor);
$moveInfo.find('[data-move-def-type]').text(defType);
$prev.removeAttr('data-color').removeAttr('data-type');
$curr.attr('data-color', atkColor).attr('data-type', atkType);
currentIndex++;
};
generateBoard();
initializePieces();
$('#move-btn').on('click', nextMove);
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
background: #222;
}
.chess-board {
display: grid;
grid-template-columns: repeat(10, auto);
border: thin solid LightYellow;
}
.cell {
width: 16px;
height: 16px;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
background: LightYellow;
}
.cell.is-odd {
background: LightSalmon;
}
.cell.is-active {
color: green;
}
.cell[data-color="white"] { color: FireBrick }
.cell[data-color="black"] { color: FireBrick }
.cell[data-color="white"][data-type="king"]:after { content: "\2654" }
.cell[data-color="white"][data-type="queen"]:after { content: "\2655" }
.cell[data-color="white"][data-type="rook"]:after { content: "\2656" }
.cell[data-color="white"][data-type="bishop"]:after { content: "\2657" }
.cell[data-color="white"][data-type="knight"]:after { content: "\2658" }
.cell[data-color="white"][data-type="pawn"]:after { content: "\2659" }
.cell[data-color="black"][data-type="king"]:after { content: "\265A" }
.cell[data-color="black"][data-type="queen"]:after { content: "\265B" }
.cell[data-color="black"][data-type="rook"]:after { content: "\265C" }
.cell[data-color="black"][data-type="bishop"]:after { content: "\265D" }
.cell[data-color="black"][data-type="knight"]:after { content: "\265E" }
.cell[data-color="black"][data-type="pawn"]:after { content: "\265F" }
.cell[data-index]:after { content: attr(data-index); }
.cell.boundry { background: FireBrick; color: LightYellow; font-size: smaller; }
.sidebar {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-width: 10rem;
border: thin solid FireBrick;
padding: 0.5rem;
background: LightYellow;
}
.move-info {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 0.25rem;
font-family: monospace;
font-size: smaller;
text-transform: uppercase;
}
.move-info strong { text-align: right; }
.move-info strong:after { content: ":"; }
.move-info .details { display: flex; gap: 0.25rem; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chess-board"></div>
<div class="sidebar">
<div class="move-info">
<strong>Move</strong>
<div class="details">
<span data-move-index></span>
<span data-move-value></span>
</div>
<strong>Attacker</strong>
<div class="details">
<span data-move-atk-color></span>
<span data-move-atk-type></span>
</div>
<strong>Defender</strong>
<div class="details">
<span data-move-def-color></span>
<span data-move-def-type></span>
</div>
</div>
<button id="move-btn">Next</button>
</div>

How to implement a simple box plot chart with javascript and css?

I want to implement a chart like below.
But my problem is collision of the numbers in this chart and I couldn't find a suitable solution for this. For example when two or three values are very close together, the collision happens. (the image below)
<template>
<div style="width: 100%">
<div class="box" style="width: 100%">
<div :style="{ left: `${bound1.spaceLeft}%` }" class="box__q1-line" />
<div :style="{ left: `${bound2.spaceLeft}%` }" class="box__q2-line" />
<div :style="{ width: `${theValue.width}%` }" class="box__value" />
</div>
<div class="box__values-container">
<div
v-for="(item, i) in sorted"
:key="i"
class="box__amount"
:style="{ left: `${item.spaceLeft}%` }"
>
{{ item.realValue }}
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from "#vue/composition-api";
function round(number: number) {
return Math.floor(number * 1000) / 1000;
}
export default defineComponent({
setup(props) {
const bound1 = ref({
realValue: 0,
spaceLeft: 0,
});
const bound2 = ref({
realValue: 0,
spaceLeft: 0,
});
const theValue = ref({
realValue: 0,
spaceLeft: 0,
width: 0,
});
const eachWidth = 6;
type ChartData = { realValue: number; spaceLeft: number };
const sorted = ref<Array<ChartData>>();
function compare(obj1: ChartData, obj2: ChartData) {
if (obj1.spaceLeft < obj2.spaceLeft) return -1;
if (obj1.spaceLeft > obj2.spaceLeft) return 1;
return 0;
}
watch(
props,
() => {
bound1.value.realValue = props.q1!;
bound2.value.realValue = props.q2!;
theValue.value.realValue = props.value!;
bound1.value.spaceLeft = round((props.q1! / props.max!) * 100);
bound2.value.spaceLeft = round((props.q2! / props.max!) * 100);
theValue.value.spaceLeft = round((props.value! / props.max!) * 100);
theValue.value.width = round((props.value! / props.max!) * 100);
sorted.value = [bound1.value, bound2.value, theValue.value].sort(
compare
);
if (
sorted.value[1].spaceLeft + eachWidth >
sorted.value[2].spaceLeft
) {
sorted.value[1].spaceLeft = sorted.value[2].spaceLeft - eachWidth;
}
if (
sorted.value[0].spaceLeft + eachWidth >
sorted.value[1].spaceLeft
) {
sorted.value[0].spaceLeft = sorted.value[1].spaceLeft - eachWidth;
}
if (theValue.value.width < 0) theValue.value.width = 3;
if (bound1.value.spaceLeft < 0) bound1.value.spaceLeft = 3;
if (bound2.value.spaceLeft < 0) bound2.value.spaceLeft = 3;
},
{ deep: true, immediate: true }
);
return {
bound1,
bound2,
theValue,
sorted,
};
},
props: {
q1: {
type: Number,
},
q2: {
type: Number,
},
max: {
type: Number,
},
value: {
type: Number,
},
},
});
</script>
<style>
.box {
width: 100%;
height: 50px;
position: relative;
border-radius: 5px;
border: 2px solid #fff;
background: #b8d0de;
overflow: hidden;
}
.box__q1-line,
.box__q2-line {
position: absolute;
width: 2px;
background: #fff;
height: 100%;
}
.box__value {
background: #3c8dbc;
height: 100%;
}
.box__amount {
position: absolute;
width: 60px;
bottom: -25px;
}
.box__values-container {
position: relative;
}
</style>
I considered two thin divs with absolute position for the two lines and I set the left property of them according to their values and another div for the amount and I set the width of it according to its value.

jQuery UI Droppable items

Hello
I have a problem. The problem is, when I move an item to multiple slots it works perfectly.
But when i have two items of the same type, and I put them together it turns into a single item with the value of 2.
But I can't figure out how i could separate that two items into two separate items with the value of one.
if($(this)[0].querySelector('.size').innerText > 1) {
$(this).children().children().html(1);
}
Project: https://codepen.io/KsenonAdv/pen/bGRaRjR

Consider the following example.
$(function() {
function log(string) {
console.log(Date.now(), string);
}
function makeGrid() {
log("Make Grid...");
for (var i = 0; i < 36; i++) {
$("<div>", {
class: "slot"
}).data({
count: 0,
stackable: true
}).appendTo(".slots");
}
log("-* Grid Complete *-");
}
function makeDraggable(target) {
log("Make Drag, Current Class: " + $(target).attr("class"));
console.log(target);
$(target).draggable({
scroll: false,
helper: "clone",
cursor: "pointer",
zIndex: 27,
revert: "invalid"
});
log("After Make Drag, Current Class: " + $(target).attr("class"));
console.log(target);
}
function refreshSlot(target) {
log("Refresh Slot");
$(".size", target).html($(target).data("count"));
}
function addItem(slot, item) {
log("Add Item " + item.id);
$.extend(item, {
stackable: (item.category != 0),
count: (item.count == undefined ? 1 : item.count)
});
slot = $(slot);
var newItem = $("<div>", {
class: "item",
id: item.id,
})
.data(item)
.css("background-image", "url(" + item.img + ")");
newItem.appendTo(slot);
$("<div>", {
class: "size"
}).appendTo(slot);
slot.data({
count: item.count,
stackable: item.stackable
});
log("Item Added - Refreshing");
refreshSlot(slot);
}
function emptySlot(target) {
log("Empty Slot " + $(target).index());
$(target).data({
count: 0,
stackable: true
}).empty();
}
function loadPlayerItems(items) {
log("Loading Player Items...");
$.each(items, function(index, item) {
addItem($(".slots > .slot").eq(index), item);
});
log("-* Loading Complete *-");
}
function isAcceptable(item) {
if ($(this).children().length == 0 || $(".item", this).data("stackable")) {
return true;
}
return false;
}
var pItems = {
playerItems: [{
img: 'https://i.imgur.com/5cjSI9X.png',
name: 'bat',
id: 1,
category: 0
},
{
img: 'https://i.imgur.com/HLQORBk.png',
name: 'axe',
id: 2,
category: 1
},
{
img: 'https://i.imgur.com/HLQORBk.png',
name: 'axe',
id: 3,
category: 1
}
]
};
makeGrid();
loadPlayerItems(pItems.playerItems);
makeDraggable(".item");
$(".slots > .slot").droppable({
accept: isAcceptable,
drop: function(event, ui) {
var origin = ui.draggable.parent();
var target = $(this);
log("Drop Accepted; From: " + origin.index() + ", To: " + target.index());
// Increase the Count
target.data("count", target.data("count") + 1);
// Check for Stack
if (target.children().length == 0) {
addItem(target, ui.draggable.data());
} else {
refreshSlot(target);
}
// Check Orginal Stack
if (origin.data("count") > 1) {
origin.data("count", origin.data("count") - 1);
refreshSlot(origin);
} else {
emptySlot(origin);
}
makeDraggable($(".item", this));
}
});
});
body {
display: flex;
justify-content: space-between;
background: url(http://img.playground.ru/images/5/1/GTA5_2015-05-07_00-53-36-07.png);
}
#inventory {
height: 56.25vw;
background: rgba(0, 0, 0, .5);
}
.list-slots {
position: relative;
background: rgba(0, 0, 0, .7);
max-width: 80%;
}
.slots {
max-width: 87%;
margin: auto;
padding-top: 3.125vw;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.slots .slot {
width: 100px;
height: calc(100px + 1em);
background-color: #ccc;
margin-bottom: 0.781vw;
}
.slots .slot .item {
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="inventory">
<div class="list-slots">
<div class="slots"></div>
</div>
</div>
As discussed in the comment, this updates the Count of items in the Slot by 1. When an items is dragged out, the count is lowered by 1.
To make things easier, I created a number of functions. You may choose to handle it in another manner if you like.

Loop through array data in carousel not working

I'm trying to build a carousel in JS that uses an array to store my data.
I want my box on the left to show the value for "Client" and the box on the right to show the value for "Candidate".
I can't seem to get it working despite what I believe is all correct?
let testimonials = [{
client: "Raphel",
candidate: "male"
},
{
client: "Tom",
candidate: "male"
},
{
client: "Jerry",
candidate: "male"
},
{
client: "Dorry",
candidate: "female"
}
];
var i = 0;
function nextItem() {
i = i + 1;
i = i % testimonials.length;
return testimonials[i].candidate;
}
function prevItem() {
if (i === 0) {
i = testimonials.length;
}
i = i - 1;
return testimonials[i].client;
}
window.addEventListener('load', function() {
$('.client-box').html(testimonials[i].client);
$('.candidate-box').html(testimonials[i].candidate);
$('.left-btn').on('click', function(e) {
$('.client-box').html(prevItem());
$('.candidate-box').html(prevItem());
});
$('.right-btn').on('click', function(e) {
$('.client-box').html(nextItem());
$('.candidate-box').html(nextItem());
});
});
https://jsfiddle.net/cL5mok3f/

Fixing the code:
let testimonials = [{
client: "Raphel",
candidate: "male"
},
{
client: "Tom",
candidate: "male"
},
{
client: "Jerry",
candidate: "male"
},
{
client: "Dorry",
candidate: "female"
}
];
var i = 0;
function nextItem() {
i = i + 1;
i = i % testimonials.length;
return testimonials[i];
}
function prevItem() {
if (i === 0) {
i = testimonials.length;
}
i = i - 1;
return testimonials[i];
}
window.addEventListener('load', function() {
$('.client-box').html(testimonials[i].client);
$('.candidate-box').html(testimonials[i].candidate);
$('.left-btn').on('click', function(e) {
var prev = prevItem();
$('.client-box').html(prev.client);
$('.candidate-box').html(prev.candidate);
});
$('.right-btn').on('click', function(e) {
var next = nextItem();
$('.client-box').html(next.client);
$('.candidate-box').html(next.candidate);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="client-box"></div>
<div class="candidate-box"></div>
<input type="button" class="left-btn" value="Prev" />
<input type="button" class="right-btn" value="Next" />

To achieve expected result, use below option
Issue: PrevItem and nextItem methods are called twice on clicking left and right which creates inconsistent carousel
Code sample
let testimonials = [
{client: "Raphel", candidate: "male"},
{client: "Tom", candidate: "male"},
{client: "Jerry", candidate: "male"},
{client: "Dorry", candidate: "female"}
];
var i = 0;
$('.client-box').text(testimonials[0].client);
$('.candidate-box').text(testimonials[1].candidate);
function nextItem() {
i = i + 1;
if (i === testimonials.length) {
i = i % testimonials.length;
}
return testimonials[i];
}
function prevItem() {
if (i === 0) {
i = testimonials.length;
}
i = i - 1;
console.log("prev", i)
return testimonials[i];
}
$('.left-btn').on('click', function(e){
let val = prevItem()
$('.client-box').text(val.client);
$('.candidate-box').text(val.candidate);
});
$('.right-btn').on('click', function(e){
let val = nextItem()
$('.client-box').text(val.client);
$('.candidate-box').text(val.candidate);
});
.testimonial-carousel {
position: relative;
width: 1000px;
}
.testimonial-carousel::after {
content: "";
display: block;
clear: both;
}
.testimonial-carousel .testimonial-box {
width: 500px;
height: 100px;
float: left;
background: #999999;
}
.testimonial-carousel .testimonial-box.candidate-box {
background: white;
margin-top: 2rem;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}
.testimonial-carousel .buttons {
position: absolute;
bottom: -60px;
right: 20px;
}
.testimonial-carousel .buttons::after {
content: "";
display: block;
clear: both;
}
.testimonial-carousel .buttons .btn {
background: black;
width: 60px;
height: 60px;
float: left;
margin-right: 5px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testimonial-carousel">
<div class="testimonial-box client-box"></div>
<div class="testimonial-box candidate-box"></div>
<div class="buttons">
LEFT
RIGHT
</div>
</div>
codepen - https://codepen.io/nagasai/pen/wLKoVv

Jquery, change all json entries to collapsed state

I'm still new to jquery and javascript as a whole.
I am trying to get all the entries from this collapsible json parser to be collapsed on webpage load.
I tried fiddling around with the first function but that doesn't seem to work.
Any help would be appreciated.
Here is the JS code:
/**
* json-view - jQuery collapsible JSON plugin
* #version v1.0.0
* #link http://github.com/bazh/jquery.json-view
* #license MIT
*/
;(function ($) {
'use strict';
var collapser = function(collapsed) {
var item = $('<span />', {
'class': 'collapser',
on: {
click: function() {
var $this = $(this);
$this.toggleClass('collapsed');
var block = $this.parent().children('.block');
var ul = block.children('ul');
if ($this.hasClass('collapsed')) {
ul.hide();
block.children('.dots, .comments').show();
} else {
ul.show();
block.children('.dots, .comments').hide();
}
}
}
});
if (collapsed) {
item.addClass('collapsed');
}
return item;
};
var formatter = function(json, opts) {
var options = $.extend({}, {
nl2br: true
}, opts);
var htmlEncode = function(html) {
if (!html.toString()) {
return '';
}
return html.toString().replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<").replace(/>/g, ">");
};
var span = function(val, cls) {
return $('<span />', {
'class': cls,
html: htmlEncode(val)
});
};
var genBlock = function(val, level) {
switch($.type(val)) {
case 'object':
if (!level) {
level = 0;
}
var output = $('<span />', {
'class': 'block'
});
var cnt = Object.keys(val).length;
if (!cnt) {
return output
.append(span('{', 'b'))
.append(' ')
.append(span('}', 'b'));
}
output.append(span('{', 'b'));
var items = $('<ul />', {
'class': 'obj collapsible level' + level
});
$.each(val, function(key, data) {
cnt--;
var item = $('<li />')
.append(span('"', 'q'))
.append(key)
.append(span('"', 'q'))
.append(': ')
.append(genBlock(data, level + 1));
if (['object', 'array'].indexOf($.type(data)) !== -1 && !$.isEmptyObject(data)) {
item.prepend(collapser());
}
if (cnt > 0) {
item.append(',');
}
items.append(item);
});
output.append(items);
output.append(span('...', 'dots'));
output.append(span('}', 'b'));
if (Object.keys(val).length === 1) {
output.append(span('// 1 item', 'comments'));
} else {
output.append(span('// ' + Object.keys(val).length + ' items', 'comments'));
}
return output;
case 'array':
if (!level) {
level = 0;
}
cnt = val.length;
output = $('<span />', {
'class': 'block'
});
if (!cnt) {
return output
.append(span('[', 'b'))
.append(' ')
.append(span(']', 'b'));
}
output.append(span('[', 'b'));
items = $('<ul />', {
'class': 'obj collapsible level' + level
});
$.each(val, function(key, data) {
cnt--;
var item = $('<li />')
.append(genBlock(data, level + 1));
if (['object', 'array'].indexOf($.type(data)) !== -1 && !$.isEmptyObject(data)) {
item.prepend(collapser());
}
if (cnt > 0) {
item.append(',');
}
items.append(item);
});
output.append(items);
output.append(span('...', 'dots'));
output.append(span(']', 'b'));
if (val.length === 1) {
output.append(span('// 1 item', 'comments'));
} else {
output.append(span('// ' + val.length + ' items', 'comments'));
}
return output;
case 'string':
val = htmlEncode(val);
if (/^(http|https|file):\/\/[^\s]+$/i.test(val)) {
return $('<span />')
.append(span('"', 'q'))
.append($('<a />', {
href: val,
text: val
}))
.append(span('"', 'q'));
}
if (options.nl2br) {
var pattern = /\n/g;
if (pattern.test(val)) {
val = (val + '').replace(pattern, '<br />');
}
}
var text = $('<span />', { 'class': 'str' })
.html(val);
return $('<span />')
.append(span('"', 'q'))
.append(text)
.append(span('"', 'q'));
case 'number':
return span(val.toString(), 'num');
case 'undefined':
return span('undefined', 'undef');
case 'null':
return span('null', 'null');
case 'boolean':
return span(val ? 'true' : 'false', 'bool');
}
};
return genBlock(json);
};
return $.fn.jsonView = function(json, options) {
var $this = $(this);
options = $.extend({}, {
nl2br: true
}, options);
if (typeof json === 'string') {
try {
json = JSON.parse(json);
} catch (err) {
}
}
$this.append($('<div />', {
class: 'json-view'
}).append(formatter(json, options)));
return $this;
};
})(jQuery);
/**
* json-view - jQuery collapsible JSON plugin
* #version v1.0.0
* #link http://github.com/bazh/jquery.json-view
* #license MIT
*/
.json-view {
position: relative;
}
.json-view .collapser {
width: 20px;
height: 18px;
display: block;
position: absolute;
left: -1.7em;
top: -0.2em;
z-index: 5;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD1JREFUeNpiYGBgOADE%2F3Hgw0DM4IRHgSsDFOzFInmMAQnY49ONzZRjDFiADT7dMLALiE8y4AGW6LoBAgwAuIkf%2F%2FB7O9sAAAAASUVORK5CYII%3D");
background-repeat: no-repeat;
background-position: center center;
opacity: 0.5;
cursor: pointer;
}
.json-view .collapsed {
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-khtml-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.json-view .bl {
display: block;
padding-left: 20px;
margin-left: -20px;
position: relative;
}
.json-view {
font-family: monospace;
}
.json-view ul {
list-style-type: none;
padding-left: 2em;
border-left: 1px dotted;
margin: 0.3em;
}
.json-view ul li {
position: relative;
}
.json-view .dots,
.json-view .comments {
display: none;
-moz-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
.json-view .comments {
padding-left: 0.8em;
font-style: italic;
color: #888;
}
.json-view .null,
.json-view .num,
.json-view .bool,
.json-view .undef {
font-weight: bold;
color: #1A01CC;
}
.json-view .str {
color: #800;
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery JSON View demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../dist/jquery.json-view.js"></script>
<link href="../dist/jquery.json-view.css" rel="stylesheet">
</head>
<body>
<div id="element"></div>
<script>
$(function() {
$('#element').jsonView(JSON.stringify({
demo: 'string',
notSet: null,
zero: 0,
'true': true,
'false': false,
undef: undefined,
number: 5,
arr: [1, 2, 3, 'string', null, { a: 1 }, [2, 3, 4]],
obj: {
string: 'test string',
arr: [1, 2, 3, 4, 'myString', ['wow', [9,8,7,6]]],
obj1: {
hello: 'world',
nice: {
to: 'meet you',
'finally': [1, 2, 3, 4, 5]
}
}
}
}));
});
</script>
</body>
</html>
Please acknowledge that all three code files are licensed under MIT.

Each <li> has a span with class collapser , using the inspect element, When you collapse the node, it adds the class collapsed in that element.
So technically, you can try to have this jQuery code:
$(".collapser").addClass("collapsed");
after loading the JSON collapser.