Как найти json на странице

How to Find a JSON object of a Website

New to the JSON world and I’m trying to find out how to view a JSON object of a webpage. Will every webpage have a JSON object and if so how do I find it in order to get the data and display it on my site? I vaguely remember something about using Firebug?

2 Answers 2

Will every webpage have a JSON object

Many web sites will not use any JSON; many will be completely static (HTML and CSS only).

It may only apply if there is a «Web API» (for programmatic access to content), but there are non-JSON ways to do APIs (the X in AJAX is for XML).

To determine how to access a site programmatically look at the site’s developer documentation. If there isn’t any documentation then any AJAX web debuggers (like FireBug) show may well be internal only and intended only for the site’s own implementation; other uses could well be not welcome (you could be up for violating IP).

Display JSON Data in HTML Page

JSON format is highly used to store data in a structured way. Even data received from a server is in JSON format. Here we will see how to display JSON data in HTML page using JavaScript in form of tables and lists.

JSON data has a structure like a javascript object. Data is stored in key-value pairs, where the key is a string and value can be any type of data.

First, you may think to display these data directly as text on the webpage but this doesn't look appealing also is not readable.

SSo in this article, we will fetch JSON data from a local or remote server and display it in a better way.

Display JSON data in HTML page using JavaScript

To start working with let our JSON data be following. Source link.

Now we will fetch this JSON data from the remote server and display it on the webpage.

To read JSON data from the local or remote servers we will use the fetch() method.

The fetch() method takes the URL of the JSON file as an argument and returns a Promise object.

After resolving the Promise object we will get the JSON data in the Response object.

We have the JSON data in data stored in a variable. Now we can use it to display the data in the webpage.

1. Display JSON Data As List

To display the JSON data in a list we will create HTML elements dynamically and insert data in them.

Elements we need to create here are ul and li .

Before we start keep the data structure of JSON data in mind. The image below shows to get the first student name we have to use data.result[0].name and to get first student marks we have to use data.result[0].marks , where to access marks of math subject we have to use data.result[0].marks.math .

Keeping the above structure in mind we first create a ul element and assign it to a variable.

This ul element will be the main element any list element ( li ) will represent a student and their marks and will be created dynamically.

Now we can create a for loop that will iterate over the data.result array and create a li element for each student and set innerHTML of the li element to the student name.

Now create another list that will contain all the marks of the student and append it to the li element (studentLI) created just before.

Now we have created a list of students and their marks. Now we can append the ul element to the mainUL element.

Finally, append it to the body. Here is the complete code to display the list of students and their marks.

2. Display JSON Data As Table

To display the JSON data in a table we will create a function that takes JSON data as an argument and creates a table and append it to the body.

In the function createtable() create the basic structure of the table so that we have the heading of the table as 'name' and 'marks'. Below these marks create another list to show the subject as shown in the code below.

Now we can create a for loop that will iterate over the data.result array and create a tr element for each student and set innerHTML of the tr element to the student name.

Finally, append the table to the body. Here is the complete Javascript code for fetching JSON data and displaying it as a table.

Conclusion

In this short tutorial, we saw how to fetch and display JSON data in HTML pages using javascript. We displayed data as a list and table with a complete explanation of the code.

Stay Ahead, Learn More

alt=»Ezoic» width=»» height=»» /> report this ad alt=»Ezoic» width=»» height=»» /> report this ad

Работа с JSON

Обозначение объектов JavaScript (JSON — JavaScript Object Notation) — стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера клиенту,таким образом чтобы это могло отображаться на веб-странице или наоборот). Вы будете сталкиваться с этим довольно часто, поэтому в этой статье мы даём вам все, что вам нужно для работы с JSON используя JavaScript, включая парсинг JSON, чтобы вы могли получить доступ к данным внутри него при создании JSON.

Необходимые знания:	Базовая компьютерная грамотность, базовые знания HTML и CSS, знакомство с основами JavaScript (см. First steps и Building blocks) и основами OOJS (see Introduction to objects (en-US) ).
Цель:	Понять, как работать с данными, хранящимися в JSON, и создавать свои собственные объекты JSON.

Нет, действительно, что такое JSON?

JSON — текстовый формат данных, следующий за синтаксисом объекта JavaScript, который был популяризирован Дугласом Крокфордом. Несмотря на то, что он очень похож на буквенный синтаксис объекта JavaScript, его можно использовать независимо от JavaScript, и многие среды программирования имеют возможность читать (анализировать) и генерировать JSON.

JSON существует как строка,что необходимо при передаче данных по сети. Он должен быть преобразован в собственный объект JavaScript, если вы хотите получить доступ к данным. Это не большая проблема. JavaScript предоставляет глобальный объект JSON, который имеет методы для преобразования между ними.

Примечание: Преобразование строки в родной объект называется десериализацией (преобразование из последовательной формы в параллельную*)*, в то время как преобразовании родного объекта в строку, таким образом ,чтобы он мог быть передан через сеть, называется сериализацией(преобразование в последовательную форму).

Объект JSON может быть сохранён в собственном файле, который в основном представляет собой текстовый файл с расширением .json и MIME type application/json .

Структура JSON

Как описано выше, JSON представляет собой строку, формат которой очень похож на буквенный формат объекта JavaScript. Вы можете включать одни и те же базовые типы данных внутри JSON, так же как и в стандартном объекте JavaScript — строки, числа, массивы, булевы и другие объектные литералы. Это позволяет построить иерархию данных, к примеру, так:

Если бы мы загрузили этот объект в программу JavaScript, создали переменную с названием superHeroes , мы могли бы затем получить доступ к данным внутри неё, используя те же самые точечную и скобочную нотации, которые мы рассмотрели в статье JavaScript object basics. Например:

Чтобы получить доступ к последующим данным по иерархии, вам просто нужно объединить требуемые имена свойств и индексы массивов. Например, чтобы получить доступ к третьей сверхспособности второго героя, указанного в списке участников, вы должны сделать следующее:

1. Сначала у нас есть имя переменной — superHeroes .
2. Внутри мы хотим получить доступ к свойству members , поэтому мы используем [‘members’] .
3. members содержат массив, заполненный объектами. Мы хотим получить доступ ко второму объекту внутри массива, поэтому мы используем [1] .
4. Внутри этого объекта мы хотим получить доступ к свойству powers , поэтому мы используем [‘powers’] .
5. Внутри свойства powers находится массив, содержащий сверхспособности выбранного героя. Нам нужен третий, поэтому мы используем [2] .

Примечание: . Мы сделали JSON, видимый выше, доступным внутри переменной в нашем примере JSONTest.html (см. исходный код). Попробуйте загрузить это, а затем получить доступ к данным внутри переменной через консоль JavaScript вашего браузера.

Массивы как JSON

Выше мы упоминали ,что JSON текст выглядит практически так же как и JavaScript объект,и это почти правильно.Причина,по которой мы говорим почти правильно заключается в том ,что массив также валиден JSON например:

Вышесказанное вполне справедливо для JSON. Вам просто нужно получить доступ к элементам массива (в его анализируемой версии), начиная с индекса массива, например [0][«powers»][0] .

Другие примечания

• JSON — это чисто формат данных — он содержит только свойства, без методов.
• JSON требует двойных кавычек, которые будут использоваться вокруг строк и имён свойств. Одиночные кавычки недействительны.
• Даже одна неуместная запятая или двоеточие могут привести к сбою JSON-файла и не работать. Вы должны быть осторожны, чтобы проверить любые данные, которые вы пытаетесь использовать (хотя сгенерированный компьютером JSON с меньшей вероятностью включает ошибки, если программа генератора работает правильно). Вы можете проверить JSON с помощью приложения вроде JSONLint.
• JSON может принимать форму любого типа данных, допустимого для включения в JSON, а не только массивов или объектов. Так, например, одна строка или номер будут действительным объектом JSON.
• В отличие от кода JavaScript, в котором свойства объекта могут не заключаться в двойные кавычки, в JSON в качестве свойств могут использоваться только строки заключённые в двойные кавычки.

Активное обучение: Работа с примером JSON

Итак, давайте рассмотрим пример, чтобы показать то, как мы можем использовать некоторые данные JSON на веб-сайте.

Начало работы

Для начала создайте локальные копии наших файлов heroes.html и style.css. Последний содержит простой CSS для стилизации нашей страницы, в то время как первый содержит очень простой HTML-код сущности:

Плюс <script> , чтобы содержать код JavaScript, который мы будем писать в этом упражнении. На данный момент он содержит только две строки, которые захватывают ссылки на элементы <header> и <section> и сохраняют их в переменных:

Мы собираемся загрузить его на нашу страницу и использовать некоторые изящные манипуляции DOM, чтобы отобразить их, например:

Получение JSON

Чтобы получить JSON, мы будем использовать API, называемый XMLHttpRequest (часто называемый XHR). Это очень полезный объект JavaScript, который позволяет нам делать сетевые запросы для извлечения ресурсов с сервера через JavaScript (например, изображения, текст, JSON, даже фрагменты HTML), что означает, что мы можем обновлять небольшие разделы контента без необходимости перезагрузки всей страницы. Это привело к более отзывчивым веб-страницам и звучит захватывающе, но, к сожалению, выходит за рамки этой статьи, чтобы изучить это гораздо более подробно.

Начнём с того, что мы собираемся сохранить URL-адрес JSON, который мы хотим получить в переменной. Добавьте нижеследующий код JavaScript:

• Метод HTTP, который следует использовать при выполнении сетевого запроса. В этом случае GET самый подходящий, так как мы просто извлекаем некоторые простые данные.
• URL-адрес для запроса — это URL-адрес файла JSON, который мы сохранили ранее.

Здесь мы сохраняем ответ на наш запрос (доступный в свойстве response ) в переменной superHeroes ; эта переменная теперь будет содержать объект JavaScript, основанный на JSON! Затем мы передаём этот объект двум вызовам функций — первый из них заполнит <header> правильными данными, а второй создаст информационную карту для каждого героя в команде и вставляет её в <section> .

Мы свернули код в обработчик событий, который запускается, когда событие загрузки запускается в объекте запроса (см. onload ) — это связано с тем, что событие загрузки запускается, когда ответ успешно возвращается; поступая таким образом,это гарантия того, что request.response определённо будет доступен, когда мы начнём работу с ним.

Теперь мы извлекли данные JSON и превратили его в объект JavaScript, давайте воспользуемся им, написав две функции, на которые мы ссылались выше. Прежде всего, добавьте следующее определение функции ниже предыдущего кода:

Мы назвали параметр jsonObj , чтобы напомнить себе, что этот объект JavaScript возник из JSON. Здесь мы сначала создаём элемент <h1> (en-US) с createElement() , устанавливаем его textContent равным свойству squadName объекта, а затем добавляем его в заголовок с помощью appendChild() . Затем мы выполняем очень похожую операцию с абзацем: создаём его, устанавливаем его текстовое содержимое и добавляем его в заголовок. Единственное различие заключается в том, что его текст задан, как конкатенированная строка, содержащая как homeTown , так и formed свойства объекта.

Создание информационных карт героя

Затем добавьте следующую функцию внизу кода, которая создаёт и отображает карты супергероев:

Для начала сохраним свойство members объекта JavaScript в новой переменной. Этот массив содержит несколько объектов, которые содержат информацию для каждого героя.

Затем мы используем for loop для циклического прохождения каждого объекта в массиве. Для каждого из них мы:

1. Создаём несколько новых элементов: <article> , <h2> , три <p> и <ul> .
2. Устанавливаем <h2> , чтобы содержать name текущего героя.
3. Заполняем три абзаца своей secretIdentity , age и строкой, в которой говорится: «Суперспособности:», чтобы ввести информацию в список.
4. Сохраняем свойство powers в другой новой переменной под названием superPowers — где содержится массив, в котором перечислены сверхспособности текущего героя.
5. Используем другой цикл for , чтобы прокрутить сверхспособности текущего героя , для каждого из них мы создаём элемент <li> , помещаем в него сверхспособности, а затем помещаем listItem внутри элемента <ul> ( myList ) с помощью appendChild() .
6. Последнее, что мы делаем, это добавляем <h2> , <p> и <ul> внутри <article> ( myArticle ), а затем добавляем <article> в <section> . Важное значение имеет порядок, в котором добавляются элементы, так как это порядок, который они будут отображать внутри HTML.

Примечание: . Если вам не удаётся заставить этот пример работать, попробуйте обратиться к нашему исходному коду heroes-finished.html (см. также он работает в режиме live).

Примечание: . Если у вас возникли проблемы после нотации точек / скобок, которые мы используем для доступа к объекту JavaScript, в этом поможет открытие файла superheroes.json на другой вкладке или в текстовом редакторе ,и обращаться к нему каждый раз, когда вам нужен JavaScript. Вы также можете обратиться к нашей статье JavaScript objectbasics чтобы получить дополнительную информацию о нотации точек и скобок.

Преобразование между объектами и текстом

Вышеприведённый пример был прост с точки зрения доступа к объекту JavaScript, потому что мы задали XHR-запрос для прямого преобразования ответа JSON в объект JavaScript, используя:

Но иногда нам не так везёт — иногда мы получаем сырую строку JSON и нам нужно преобразовать её в объект самостоятельно. И когда мы хотим отправить объект JavaScript по сети, нам нужно преобразовать его в JSON (строку) перед отправкой. К счастью, эти две проблемы настолько распространены в веб-разработке, что встроенный объект JSON доступен в браузерах, которые содержат следующие два метода:

: принимает строку JSON в качестве параметра и возвращает соответствующий объект JavaScript. : принимает объект, как параметр и возвращает эквивалентную строковую JSON строку.

Вы можете увидеть первый метод в действии в нашем примере heroes-finished-json-parse.html (см. исходный код) — это то же самое, что и в примере, который мы создали ранее, за исключением того, что мы установили XHR для возврата сырого JSON текста, затем используется parse() , чтобы преобразовать его в фактический объект JavaScript. Ключевой фрагмент кода находится здесь:

Как вы могли догадаться, stringify() работает обратным образом. Попробуйте ввести следующие строки в консоль JavaScript браузера один за другим, чтобы увидеть его в действии:

Здесь мы создаём объект JavaScript, затем проверяем, что он содержит, а затем преобразуем его в строку JSON, используя stringify() , сохраняя возвращаемое значение в новой переменной, а затем снова проверяем его.

Резюме

В этой статье мы предоставили вам простое руководство по использованию JSON в ваших программах, в том числе о том, как создавать и анализировать JSON, и как получить доступ к данным, заблокированным внутри него. В следующей статье мы рассмотрим объектно-ориентированный JavaScript.

Как найти и распарсить JSON на странице сайта в интернете с помощью VBA Excel? ⁠ ⁠

В этом посте я покажу, как с помощью VBA сделать, то, для чего VBA вроде бы как изначально не предназначен – как получить значения нужных переменных из структуры JSON.

Этот пост сделан по мотивам просьбы моего первого и пока единственного подписчика, сделавшего комментарий на предыдущий пост «Макрос получения курсов доллара за период с сайта Банка России»

В чем отличие между сервисом ЦБ России и сайтом worldometers.info ? В том, что ЦБ предлагает XML сервис для автоматической загрузки информации (см. http://www.cbr.ru/development/SXML/ ) – ее неудобно смотреть через веб браузер, но удобно получать с помощью паучьих алгоритмов, а worldometers.info предлагает информацию для людей, а не для пауков.

Поэтому создаваемому на VBA паучку придется постараться, чтобы понять разметку «для людей».

Для работы паука необходимо дополнительно подключить три библиотеки:

1. Microsoft XML parser (MSXML) – тот же, что использовался для получения курсов ЦБ с сайта Банка России.

2. Библиотеку для работы с объектной моделью HTML.

3. Библиотеку для использования возможностей JavaScript из VBA.

Получаем html с сайта:

В полученном html паучку нужно найти и распарсить данные о количестве зарегистрированных случаев из формата JSON. Эти данные представлены вторым аргументом в вызове функции Highcharts.chart(chartName, chartData), которая на сайте рисует график.

В результате выполнения нижепредставленного кода в переменной strJson должна оказаться структура с данными в JSON формате.

Теперь самое интересное – как распарсить эту JSON структуру? Чистый VBA это делать не умеет. Но с JSON прекрасно работает JavaScript. А в VBA есть инструмент для использования возможностей JavaScript для пользователей MS Excel.

Мы можем в VBA получить уже распарсенную JSON переменную:

Проблема в том, что с объектом objJSON ничего нельзя сделать в рамках VBA – у него нет ни свойств, ни методов. Поэтому создаем эти методы на языке JavaScript. Нам нужно вытащить даты (xAxis) и количество (series->data):

Вот что пишем в VBA редакторе:

Загоняем данные в привычные VBA массивы:

Ну и раскатываем эти массивы по рабочему листу:

Вот, что получилось в результате на листе рабочей книги:

По этим данным легко построить график, например, такой:

Если захотите получить готовый файл Excel с рабочим кодом – дайте знать в комментариях.

635 постов 14.5K подписчиков

Правила сообщества

2. Публиковать посты соответствующие тематике сообщества

3. Проявлять уважение к пользователям

4. Не допускается публикация постов с вопросами, ответы на которые легко найти с помощью любого поискового сайта.

По интересующим вопросам можно обратиться к автору поста схожей тематики, либо к пользователям в комментариях

Важно — сообщество призвано помочь, а не постебаться над постами авторов! Помните, не все обладают 100 процентными знаниями и навыками работы с Office. Хотя вы и можете написать, что вы знали об описываемом приёме раньше, пост неинтересный и т.п. и т.д., просьба воздержаться от подобных комментариев, вместо этого предложите способ лучше, либо дополните его своей полезной информацией и вам будут благодарны пользователи.

Утверждения вроде «пост — отстой», это оскорбление автора и будет наказываться баном.

Вообще этим обьектом (скрипт контролом) можно делать огромное количество операций и на vbscript и на javascript. Очень мощный инструмент для языков, не имеющих других механизмов работы с системой и ее библиотеками.

Решение конечно красивое, но смущает eval. Фактически он интерпретирует и исполняет код, которые ему передают строкой. Так что если Вы не уверены на 146% в надёжности источника данных, передавать полученный оттуда текст в eval ОЧЕНЬ плохая идея. Если источник взломает злоумышленник и передаст в ответ на ваш запрос текст с функцией, которая загружает шифровальщика, последствия могут быть печальными.

Если уж совсем нет другого выхода — хотя бы попытаться replace’ом, скажем, заменить все круглые скобки — хотя это не даст полной защиты, но хоть что-то

о Спасибо! оставлю тут заявку на файл эксель

Жоброго времени суток, первая мвсль, которая пришла после прочтения поста — это шпиЁнство за ценами конкурентов, реализуемо?

Парсинг персональных ачивок⁠ ⁠

Долгое время был в read-only, но на днях увидел пост о борьбе с баянами «своими» постами, и как бы сказать вдохновился. Ладушки, поехали.

На Пикабу, на странице ленты наград есть проблема: нельзя просмотреть персональные ачивки. Есть только разделы «все», «индивидуальные» (которая по сути «все») и «сообщества». Мда, и сортировки нет, одна кнопка «загрузить еще» красуется. А мне было бы интересно почитать посты, за которые пользователей наградили персональными ачивками. Штош, если гора не идет к Магомеду, решаем проблему сами.

За язык программирования взял Javascript, т.к. долгое время работаю на нем и хотелось запускать скрипт сразу из браузера. Заодно почему бы и не найти все ачивки, а еще сгруппировать по пользователям (это не все ачивки :(, см. п. 4 в проблемах в конце поста). Посты писать не умею, поэтому сразу результат (код ниже).

На треугольники-стрелочки (которые слева) можно нажать, чтобы раскрыть список.

Отлично! Теперь можно скопировать ник пользователя, вставить в URL после «собачки» (https://pikabu.ru/@) и почитать посты.

Ну и сам скрипт с коментариями, если кто-то тоже хочет запустить у себя. Инструкция по запуску и проблемы ниже.

UPD. Не знал, что Пикабу не переваривает код. Ссылка на исходник https://pastebin.com/C7eZp3H7

Инструкция по запуску скрипта (только десктоп):

Открываем любую страницу Пикабу в браузере, лишь бы домен был pikabu.ru, иначе возможна ошибка CORS.

Нажимаем F12 (или Ctrl + Shift + i) (или тыкаем правой кнопкой мыши в любое место и выбираем пункт Inspect/Посмотреть код) (или через настройки браузера справа вверху в пункте Developer Tools/Инструменты разработчика). Открылись инструменты разработчика.

Открываем вкладку Console/Консоль.

Вставляем весь скрипт и нажимаем Enter.

Ждем секунд 40 (зависит от интернет соединения, к серверу же обращаемся). Можно посмотреть ход выполнения скрипта во вкладке Network/Сеть. Там должны запросы к серверу отличающиеся только параметром page.

Смотрим в консоль, и если ошибки нет, любуемся результатом.

Проблемы, с которыми столкнулся:

Только методом тыка удалось составить необходимый header для AJAX запроса. И почему-то это ‘X-Requested-With’. Странно, почему не ‘Content-Type’?

Кнопка «загрузить еще» грузит гребаный HTML код. Да, для браузера пользователя так быстрее, чем получать JSON и по нему рендерить HTML, но твою мать 🙁

Я с этим не сталкивался, но если кто-то хочет запустить скрипт у себя, возможны синтаксические ошибки, т.к. использовал такие конструкции как spread, window.fetch и async/await. Эта проблема решается свежей версией браузера, в которой должны быть реализованы эти фичи.

Почему-то на сервере всего 36 страниц наград. Т.е. это не все награды. Может и можно как-то загрузить все, но не нашел.

Изначальная цель поиска персональных ачивок достигнута наполовину, потому что непонятно как понять, что ачивка персональная, а не выдана только одному пользователю. Поэтому просто взял весь список ачивок и отфильтровал по выданному кол-ву пользователей (чтобы был 1 пользователь-владелец), ну хоть как-то.

Странно, в предпросмотре поста, слетели табы/пробелы кода.

Ну вот и все. Сам скрипт занял примерно 2 часа, зато теперь можно почитать специфичные посты (жаль только что не все (см. п. 4 в проблемах)).

P.S. скрипт мой значит тег «мое» 🙂 Или нет, непонятно

P.P.S. чукча не писатель

Как я сделал курс по Экселю для новичков⁠ ⁠

Сделал я курс по Экселю для новичков случайно. Просто так получилось естественным путем.

Сдал небольшой проект одной компании, а в этом проекте по желанию заказчика был кусок на Excel-е.

В свободное время, думая, как бы комфортно развлечься, я просматривал наиболее интересные моменты из этой экселевской части проекта.

И вдруг мне подумалось. Если в основной части эклелевского файла убрать специфические моменты, макрос сделать простым и понятным, а форму сделать познавательно-развлекательной, да еще переделать документацию, то тогда. Получается почти готовый и вроде совсем неплохой «Курс по Экселю для новичков».

Подумал — сделал. Другого пути нет. Иначе, эта идея будет вертеться в голове, не давая покоя. Лучше идеи реализовывать, хотя бы для того, чтобы они отстали.

А тут еще сообразительная девчушка Светлана мимо пробегала. Я ее поймал и попросил пройтись по пошагово по этому курсу, с целью понять: реально ли научиться Экселю по моему новому курсу.

Ну, вот, пока она занималась, я фиксировал все ее телодвижения в видео формате.

В итоге получилось пять видео, вот их краткие описания.

Часть 1 — Подготовка. Запуск.

Что такое Excel и кому он нужен.

Где взять Excel, как установить. Лучшие альтернативы Excel.

Как запустить Excel. Где находится запускаемый файл Excel.

Часть 2 — Тренировка. Таблица умножения.

Разминочная тренировка. Выполняется на листе «Тренировка».

Всякие простейшие упражнения для разогрева.

Часть 3 — Задача «Распределение фонда премий».

Часть 4 — Турнирная таблица шахматный турнир.

Часть 5 — VBA (Visual Basic для приложений).

Использование VBA для расчета коэффициента Бергера и итоговых мест

Если есть у вас интерес быстро усвоить Excel (или альтернативную электронную таблицу), то добро пожаловать сюда:

Там все материалы в интуитивно понятной форме.

Уже 9⁠ ⁠

Самый большой проект на бесплатной cms⁠ ⁠

Итак, меня сделали админом этого сообщества 🙂 К сожалению, постов тут нет, так что модерировать особо нечего. Старые посты тоже модерировать уже нельзя 🙂

Попробую исправить ситуацию 🙂 Напишу пост сам и забаню кого-нибудь в комментариях 🙂

Насколько нелепо большие проекты вы писали на простых бесплатных cms? В моей практике, присутствует интернет магазин с собственным движком и практически годом разработки на wordpress и крупный проект в сфере телекома ( https://irt24.ru/ ).

Проект в сфере телекома, продажа интернет и ТВ тарифов, по сути сайт посредник(диллер) продающий тарифы Ростелекома/МТС и прочих через свой функционал.

На старте функционал выглядел не очень большим, на пару месяцев работы, подумаешь парочка тарифов и не такое делали. Максимум 6-8 месяцев, хотя сроки я не взялся сразу точно назвать.

На практике оказалось, что количество параметров редактируемых у этих тарифов физически в админке выглядит как простыня 1000px на 9000px, это сотни параметров различающихся в зависимости от группы тарифов и обладающие сложными взаимосвязями между собой.

Там где на сайте скромный каталог из четырех разделов, в админке скрыто ещё 10-к каталогов взаимосвязанных друг с другом. Тарифы телевидения содержат каналы, каналы распределяются по пакетам каналов, делятся по тематикам итд.

Стоит подметить, админка wordpress без особых проблем справилась с подобной загрузкой, каталоги весьма удобно распределились в меню, параметры редактирования тарифа органично распределись на всем доступном пространстве экрана администратора.

Один экран, с настройками роутеров(подобные экраны ещё два вверх, несколько вниз):

На самом сайте, разумеется фунционал тоже реализовывался без лишней скромности и с максимальным размахом. Беглый просмотр функционала Ростелекома и МТС по тематике показал крайнюю их узость и отсутствие массы ценных и необходимых пользователю функций.

Зато данные функции в избытке нашлись на американских площадках, откуда и начали щедро заимствоваться, попутно максимально расширяясь и усложняясь.

Так родились карточки генерируемые вплоть до запятой под каждый тариф и даже в мелочах редактируемые через админку, умная корзина позволяющая детально настроить все основные и дополнительные опции для тарифа, разумеется отдельные страницы для каждого тарифа позволяющие сделать тоже самое +дающие развернутое описание опций.

Тарифов оказалось довольно много и им явно нужен каталог для удобной сортировки и подбора нужного. С одной стороны, для этих целей могло хватить обычного каталога со списком тарифов, но это не создает достаточной боли в процессе разработки.

Поэтому был добавлен аяксовый каталог-фильтр поверх основного каталога, позволяющий тыкая параметры(вроде скорости интернета) тут же формировать список подходящих тарифов на странице. Разумеется, необходимо что бы в фильтре остались активны только те параметры которые встречаются среди уже отобранных тарифов.

То есть, если безлимитной мобильной связи среди тарифов со скоростью интернета 500 мб/с нет, то данная опция становится недоступной и мы показываем подсказку почему так произошло.

Впрочем, выше сказанное указывает только на фильтр. Где же каталог? Разумеется, наш фильтр должен уметь переключаться между категориями каталога, причем проверяя сможет ли он это сделать с уже выбранными опциями.

Обязательно, нужно добавить в фильтр возможность подбора по цене, это очень важно. Причем ползунков там должно быть два и оба в режиме реального времени оценивать своё состояние, нельзя прокрутить ползунок в состояние в котором фильтр не найдет тарифа.

Так же, никогда нельзя забывать про мобильные устройства, все должно работать на любом смартфоне/планшете/умном холодильнике(кто знает как жизнь повернется?)

И так, тарифы подобраны, дальше нужно их сравнить. Здесь нужно реализовать функционал сравнения по каждой опции и от щедрой души разрешить сравнивать между собой даже тариф только с интернетом, против тарифа только с ТВ. Вдруг появятся желающие(ценители).

В целом, реализация подобных монстров в одиночку на WP, это довольно спорная идея. Хотя вполне возможно, структура кода тоже получается максимально простой.

Чистый php, общение с базой данных через базовый функционал WP.

Jquery и парочка простых библиотек.

Файлы в коде изолированы по модулям, модуль сравнение содержит все свои стили, скрипты и файлы php шаблонов. То есть, практически автономен, имеет свой css и свой js, не подгружаемые другими модулями. Заметных сложностей с поиском кода не было 🙂

У нас с JS есть общая тайна — мы оба не разбираемся в больших числах⁠ ⁠

P.S. JS не поддерживает целочисленные типы, все числа являются number, который по факту double, поэтому самый большой int который JS может сохранить без потери точности — 2^53 — 1

Никаких ошибок при попытке обработать слишком большое число не будет — оно просто сконвертируется в ближайшее представимое double (удачного дебага, если это ID в базе)

То же касается JSON — как формат, он не содержит точных требований как обрабатывать числа — всё number и зависит от имплементации. Какие-то языки и библиотеки различают int и double автомагически, какие-то всё интерпретируют как double, какие-то падают на конверсии.

Javascript⁠ ⁠

Помощь с макросом⁠ ⁠

Дамы и господа, добрый день.

Есть макрос который берет выделенные ячейки и сохраняет их в папку с файлом в виде картинки JPG. Мне надо чтоб сохранял заранее заданный диапазон. Сердцем чую, что ответ довольно прост, но мозгом пока не допер. Вся надежда на ваши светлые умы.

Ипотека или аренда + инвестиции!?⁠ ⁠

Калькулятор с очень подробным расчетом. Эмоции в сторону. Цифры покажут ответ.

Если Вы найдете ошибку в расчетах или у Вас есть еще идеи для улучшения калькулятора, то пишите об этом! Ссылка на Excel калькулятор в конце статьи.

Для расчета нам потребуется учесть все расходы/доходы, связанные с ипотекой и сравнить такие же цифры при аренде и инвестициях.

Начнем. Для примера выбираем 2х комнатную квартиру для семьи, которая хочет жить в Красноярске в районе Южный Берег.

Вот то, что нужно учесть для ипотеки:

• Текущая рыночная стоимость квартиры 6 850 000 р.

• Если мы настроены пессимистично и верим в то, что рынок недвижимости сейчас рухнет, то можно это учесть. Закладываем в расчет падение рыночной цены квартиры на 20%. Получается 5 480 000р.

• Фактическая цена покупки квартиры может отличаться от рыночной. Может мы поторговались, а может наоборот взяли ипотеку под низкий процент с завышением цены. В нашем примере цена без изменений.

• Первоначальный взнос будет минимально возможный 15%. 1 027 500р.

• Заемные средства по ипотеке 5 822 500р.

• Если есть возможность использовать материнский капитал на первоначальный взнос, то нужно его учесть. В нашем случае без материнского капитала.

• Процентная ставка по ипотеке 6,7% от Сбербанка на Домклик. Программа с господдержкой на новостройки 2022.

• Будем рассматривать самую длинную ипотеку на 30 лет.

• Ежемесячный платеж по ипотеке 37 571р.

• Жилая площадь квартиры 58,4 кв.м.

• Количество лет заемщика для расчета страховки. 34 года.

• Страховка жизни и здоровья на год получается 28 933р.

• Страховка квартиры на год получается 13 101р.

• Новостройки сразу не переходят в собственность. Нужно учесть количество месяцев до сдачи дома. В нашем случае 14 месяцев.

• После приемки квартиры от застройщика потребуется какое-то время на переезд и подготовку квартиры. В нашем случае 1 месяц.

• Квартиры на Южном Берегу продаются с готовой отделкой. Заезжай и живи. Значит если мы не требовательны, то на доделку квартиры нам придется потратить минимум. Заложим 5 000р.

• Нам потребуется мебель и техника в квартиру. Опять же если мы не требовательны к обустройству квартиры, то обставить 2к квартиру с нуля обойдется примерно 300 000р.

• Нам потребуется эксперт при приемке квартиры от застройщика. Заложим на услуги 25 000р.

• Нам потребуются дополнительные расходы на оформление сделки. Закладываем 15 000р.

• Нужно учесть стоимость ежемесячных коммунальных услуг. 3 947р.

• Налог на квартиру в год 4 504р.

• Нужно учесть прочие ежемесячные расходы, которые могут быть связаны с приобретаемой квартирой. У дома могут отсутствовать бесплатные парковки и нам придется арендовать ежемесячно паркинг. В нашем случае дополнительных расходов нет.

• Так же нужно учесть прочие ежегодные расходы, которые могут быть связаны с приобретаемой квартирой. Например, мы хотим дополнительно застраховать гражданскую ответственность перед соседями. В нашем случае дополнительные расходы закладывать не будем.

• Периодически нам нужно будет делать косметический ремонт в квартире. Будем делать 1 ремонт в 5 лет. Всего 6 косметических ремонтов за весь срок ипотеки.

• Необходимо учесть стоимость будущих косметических ремонтов. Для этого указываем цену косметического ремонта на текущий момент. В дальнейшем вычислим цену по инфляции. Текущая стоимость косметического ремонта для такой квартиры 233 600р.

• За покупку квартиры можно сделать налоговый вычет. Для учета налогового вычета нужно указать официальный доход. В нашем случае указываем МРОТ. 15 279р.

• Указываем налоговый вычет за покупку квартиры. На текущий момент это 260 000р.

• Указываем налоговый вычет за проценты по ипотеке. На текущий момент это 390 000р.

• В дальнейшем при продаже квартиры нужно будет отдать 3% риелтору.

Чтобы расчет был точным нужно учесть статистику изменения цен за предыдущие года. Официальная статистика за 20 лет 2003-2022гг (Все подтверждения и расчеты в Excel файле):

• Ежегодный среднегодовой процент роста цены на недвижимость 10,86%.

• Ежегодный среднегодовой процент роста цены на коммунальные услуги 6,49%.

• Ежегодный среднегодовой процент роста цены на косметический ремонт (равно инфляции) 8,48%.

• Со временем дом с квартирой стареет и теряет в своей стоимости. Процент амортизации стоимости недвижимости после покупки 10,23%.

Вот то, что нужно учесть для аренды:

• Стоимость аренды такой же квартиры в месяц 35 000р.

• При съеме квартиры в аренду требуется минимум вложений, но все же нужно предусмотреть 5 000р в начале срока на мелочи.

• При аренде квартиры нужно оплачивать счетчики ежемесячно. Закладываем 1 081р.

• При съеме квартиры в аренду будут частые переезды. Предположим, что нужно будет переезжать каждые 2 года. За выбранный срок ипотеки в 30 лет в аренде будет 15 переездов.

• При переезде нужно оплачивать комиссию риелтору. Закладываем расходы на комиссию 50%.

Так же учитываем статистику изменения цен за предыдущие года. Официальная статистика за 20 лет 2003-2022гг (Все подтверждения и расчеты в Excel файле):

• Ежегодный среднегодовой процент роста цены на аренду 6,09%.

• Ежегодный среднегодовой процент роста цены на счетчики 6,49%.

• Деньги сэкономленные при съеме квартиры в аренду будут инвестироваться на Московскую Биржу. Среднегодовой процент полной чистой доходности на Московской Бирже 10,8%.

Все исходные данные собраны. Теперь нужно приступить к расчетам. Наша задача понять какая стратегия принесет больше прибыли в конце срока.

Сразу спойлер. Итоговые результаты:

Детальный расчет в таблице:

PS: в таблице заложен еще скрытый функционал. Сейчас в Excel файле эти строки и столбцы скрыты, чтобы не отвлекали от основной темы, но Вы можете их все отобразить. Скрытые возможности:

• Расчет инвестиций в золото.

• Сравнение инвестиции в ипотеку для сдачи квартиры в аренду против инвестиции в Московскую Биржу.

Еще раз обращаюсь: если Вы найдете ошибку в расчетах или у Вас есть еще идеи для улучшения калькулятора, то обязательно пишите об этом!