Как работает JSON Pipe в Angular?

Просмотр исходного кода, чтобы понять, как это работает

Угловые каналы лучше всего подходят для преобразования / форматирования данных

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

Без дальнейшего ожидания перейдем к исходному коду:

Исходный код: https://github.com/angular/angular/blob/10.0.2/packages/common/src/pipes/json_pipe.ts#L10-L34

Все просто, правда? Это так же просто, как использовать JSON.stringify, передав три параметра. Но знаете ли вы, для чего нужны эти второй и третий параметры?

Не волнуйся. Давайте разберемся, что они делают

Подробная информация о JSON.stringify:

Метод JSON.stringify() преобразует объект или значение JavaScript в строку JSON, при необходимости заменяя значения, если указана функция-заменитель, или, возможно, включая только указанные свойства, если указан массив-заменитель.

Из документов MDN: Синтаксис JSON.stringify(value[, replacer[, space]])

Давайте теперь рассмотрим все параметры на нескольких примерах.

Значение: объект или значение, которое необходимо преобразовать в строку JSON.

Заменитель: функция, которая изменяет поведение процесса строкового преобразования, или массив String и Number, которые служат в качестве разрешенного списка для выбора / фильтрации свойств объекта значения, который будет включены в строку JSON. Если это значение равно null или не указано, все свойства объекта включаются в результирующую строку JSON.

Канал JSON в Angular не использует заменитель

Давайте рассмотрим несколько примеров для обоих вариантов использования:

Пробел: для этого мы можем передать строку или число.

Если мы передаем число, оно указывает количество пробелов для использования в качестве пробела, и это число ограничено 10 (если оно больше, то значение будет просто 10). Значения меньше 1 указывают на то, что пространство использовать нельзя.

Если это String, строка (или первые 10 символов строки, если она длиннее) используется как пробел. Если этот параметр не указан (или равен null), пробелы не используются.

В канале JSON Angular используются 2 пробела.

Давайте посмотрим на несколько примеров

Совет. Если объект, который передается в метод JSON.stringify, имеет toJSON метод, то обычное преобразование в строку не выполняется, и вместо этого он просто вызывает этот метод.

Ресурсы:
MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

Угловой: https://github.com/angular/angular/blob/master/packages/common/src/pipes/json_pipe.ts

Вот и все. Надеюсь, вы найдете это полезным. Следите за более интересными статьями.