← Назад к Apps

JSON Viewer Pro

Универсальный инструмент для работы с JSON. Позволяет форматировать данные, просматривать их в виде дерева и быстро анализировать структуру объектов.

▶ Запустить

👁 16

const root = container;

root.innerHTML = `
  <div style="font-family:monospace; max-width:800px;">
    <h2>JSON Viewer Pro</h2>

    <textarea id="input" style="width:100%; height:140px;"></textarea>

    <div style="margin:10px 0; display:flex; gap:8px; flex-wrap:wrap;">
      <button id="format">Форматировать</button>
      <button id="tree">Дерево</button>
      <button id="copy">Копировать</button>
      <button id="clear">Очистить</button>
    </div>

    <pre id="output" style="background:#000; padding:10px; white-space:pre-wrap;"></pre>
  </div>
`;

const input = root.querySelector("#input");
const output = root.querySelector("#output");

input.value = '{"user":{"name":"Alex","skills":["JS","PHP"]}}';

// ===== TREE =====
function renderTree(obj, indent = 0){
  let res = "";

  for(let key in obj){
    if(typeof obj[key] === "object" && obj[key] !== null){
      res += " ".repeat(indent) + key + ":\n";
      res += renderTree(obj[key], indent + 2);
    } else {
      res += " ".repeat(indent) + key + ": " + obj[key] + "\n";
    }
  }

  return res;
}

// ===== FORMAT =====
root.querySelector("#format").onclick = () => {
  try{
    const parsed = JSON.parse(input.value);
    output.textContent = JSON.stringify(parsed, null, 2);
  } catch(e){
    output.textContent = "Ошибка JSON: " + e.message;
  }
};

// ===== TREE BUTTON =====
root.querySelector("#tree").onclick = () => {
  try{
    const parsed = JSON.parse(input.value);
    output.textContent = renderTree(parsed);
  } catch(e){
    output.textContent = "Ошибка JSON: " + e.message;
  }
};

// ===== COPY =====
root.querySelector("#copy").onclick = () => {
  const text = output.textContent;

  if(!text) return;

  navigator.clipboard.writeText(text).then(() => {
    const btn = root.querySelector("#copy");
    const original = btn.textContent;

    btn.textContent = "Скопировано";

    setTimeout(() => {
      btn.textContent = original;
    }, 1500);
  });
};

// ===== CLEAR =====
root.querySelector("#clear").onclick = () => {
  input.value = "";
  output.textContent = "";
};