Работа с Json. Нужно 3 координаты вывести в отдельный Json файл и вызвать его при нажатии на кнопку.

@Rambler · Регистрация: 11.08.2014

Author24 — интернет-сервис помощи студентам

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

Javascript

function ******cy () {
var array = [
    [41.387942, 69.2711688, 'Flora Medicaments'],
    [41.374549, 69.304909, '******zon Trade'],
    [41.372610, 69.309215, 'Oxymed']
        ].map(e => new google.maps.Marker({
        position: {lat: e[0], lng: e[1]},
        map: myMap,
        animation: google.maps.Animation.DROP,
        title: e[2]
    }));
        return array
}

@amr-now · 08.02.2019, 11:16

Здравствуйте.
Rambler, объясните нормальную конечную цель.

Дано:
некий сторонний сервис, предоставляющий по запросу страшный и длинный тестовый файл в формате json.
Вы его загрузили себе.
Куда загрузили? В браузер или на nodeJS ? От этого сильно зависят дальнейшие действия.

Преобразовать страшный и длинный json можно как угодно.
Дальше то что делать?

@Rambler · 08.02.2019, 20:16 **[ТС]**

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

@amr-now · 09.02.2019, 12:23

Rambler, в задаче очень щекотливый вопрос.
Поскольку все данные в текстовом виде будут полностью продублированы для каждого элемента массива,
нужно ли многократно дублировать myMap и google.maps.Animation.DROP ?
Или сохранять в хранилище только координаты с надписью ?

PHP/HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
        // Имитация гугль-сервиса, не обращаясь к гуглю.
        let google = {
            maps: {
                Marker: class Marker {
                    constructor(obj) {
                        this.position = obj.position;
                        this.map = obj.map;
                        this.animation = obj.animation;
                        this.title = obj.title;
                    }
                },
                Animation: { DROP: 777 }
            }
        };
        let myMap = {};
 
        // Тестируемый код
        function ******cy() {
            let array = [
                [41.387942, 69.2711688, 'Flora Medicaments'],
                [41.374549, 69.304909, '******zon Trade'],
                [41.372610, 69.309215, 'Oxymed']
            ].map(e => new google.maps.Marker({
                position: { lat: e[0], lng: e[1] },
                map: myMap,
                animation: google.maps.Animation.DROP,
                title: e[2]
            }));
            return array;
        }
 
        localStorage.clear(); // в целях тестирования очистить локальное хранилище
 
        // Если в локальном хранилище было пусто, то результат функции ******cy() сохранить в локальном хранилище
        if (localStorage.length === 0)
            localStorage.setItem("******cy", JSON.stringify(******cy()));
 
        function clickHandler(e) {
            let select = document.getElementById("******cy");
 
            // Взять из локального хранилища массив. Массив сейчас из анонимных объектов.
            let array = JSON.parse(localStorage.getItem("******cy"));
            console.log(array);
            // Превратить все элементы массива из анонимных объектов в экземпляры google.maps.Marker
            for (let item of array) {// Тот самый foreach. В отличие от map() новые элементы массива не создает.
                Object.setPrototypeOf(item, google.maps.Marker.prototype);
                select.add(new Option(item.title, item.title));
            }
            console.log(array);
        }
    </script>
    <form>
        <label for="******cy">******cy: </label>
        <select id="******cy" style="width: 150px;">
        </select>
        <input type="button" id="load" style="width: 100px;" value="Загрузить" />
    </form>
    <script>
        // Повесить обработчик на кнопку. когда DOM уже загрузился
        document.getElementById("load").onclick = clickHandler;
    </script>
</body>
</html>

Именно браузер сам по себе в файл не сохраняет, он умеет сохранять в разноообразные локальные хранилища.

Добавлено через 1 час 3 минуты
Вот вариант, когда в JSON сохраняются только координаты с надписью. Без myMap и google.maps.Animation.DROP

PHP/HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
        // Имитация гугль-сервиса, не обращаясь к гуглю.
        let google = {
            maps: {
                Marker: class Marker {
                    constructor(obj) {
                        this.position = obj.position;
                        this.map = obj.map;
                        this.animation = obj.animation;
                        this.title = obj.title;
                    }
                },
                Animation: { DROP: 777 }
            }
        };
        let myMap = {};
 
        // Тестируемый код
        let array = [
            [41.387942, 69.2711688, 'Flora Medicaments'],
            [41.374549, 69.304909, '******zon Trade'],
            [41.372610, 69.309215, 'Oxymed']
        ];
 
        localStorage.clear(); // в целях тестирования очистить локальное хранилище
 
        // Если в локальном хранилище было пусто, то массив координат с надписями сохранить в локальном хранилище
        if (localStorage.length === 0)
            localStorage.setItem("******cy", JSON.stringify(array));
 
        function ******cyConverter(arr) {
            return arr.map(e => new google.maps.Marker({
                position: { lat: e[0], lng: e[1] },
                map: myMap,
                animation: google.maps.Animation.DROP,
                title: e[2]
            }));
        }
 
        function clickHandler(e) {
            let select = document.getElementById("******cy");
 
            // Взять из локального хранилища массив координат с надписями. 
            let array = JSON.parse(localStorage.getItem("******cy"));
            console.log(array);
            // Скопировать элементы массива из анонимных объектов в экземпляры google.maps.Marker
            let farmacy = ******cyConverter(array);
            for (let item of farmacy) {// Тот самый foreach. В отличие от map() новые элементы массива не создает.
                select.add(new Option(item.title, item.title));
            }
            console.log(farmacy);
        }
    </script>
    <form>
        <label for="******cy">******cy: </label>
        <select id="******cy" style="width: 150px;">
        </select>
        <input type="button" id="load" style="width: 100px;" value="Загрузить" />
    </form>
    <script>
        // Повесить обработчик на кнопку. когда DOM уже загрузился
        document.getElementById("load").onclick = clickHandler;
    </script>
</body>
</html>

@Rambler · 09.02.2019, 20:19 **[ТС]**

Добавлено через 11 минут
Я вижу Вы знаток в этой области. Мне нужна Ваша помощь по работе с JSON.

Комментарий модератора

Правила форума
4. Порядок создания тем.
4.6 Обсуждение вопросов - только в теме на форуме. Приглашения к обсуждению еще где-либо (в том числе и с помощью системы личных сообщений) запрещены, за исключением коммерческих разделов.
5. Запреты и ограничения.
5.9 Запрещено отсылать пользователей из тематических разделов в разделы фриланса, а также рекламировать свои услуги или предлагать/просить/требовать оплату за помощь, кроме разделов для платных услуг.

@amr-now 6492 / 3903 / 2005 Регистрация: 14.06.2018 Сообщений: 6,781
	08.02.2019, 11:16	2
	Здравствуйте. Rambler, объясните нормальную конечную цель. Дано: некий сторонний сервис, предоставляющий по запросу страшный и длинный тестовый файл в формате json. Вы его загрузили себе. Куда загрузили? В браузер или на nodeJS ? От этого сильно зависят дальнейшие действия. Преобразовать страшный и длинный json можно как угодно. Дальше то что делать? 0

@Rambler -39 / 0 / 0 Регистрация: 11.08.2014 Сообщений: 72
	08.02.2019, 20:16 [ТС]	3
	Ситуация такая, Как видите координаты с данными находится в неком массиве с идентификатором array. Вынести эти координаты то есть элементы массива в отдельный файл JSON и при клике нужно вызвать его. 0

	09.02.2019, 20:19

Опции темы