Блог

Главная - Вопросы по программированию - Запись и чтение данных из объекта Javascript

Запись и чтение данных из объекта Javascript

#javascript #jquery #json #svelte

#javascript #jquery #json #стройный

Вопрос:

У меня есть следующая небольшая настройка в Svelte:

Календарь и флажки

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

Вот что у меня сейчас есть в моем файле svelte:

 <script>
    import Datepicker from "praecox-datepicker";
    import { onMount } from 'svelte';

    export let name;

    let day;
    let questions = [
            {value: "Condition 1", checked: false},
            {value: "Condition 2", checked: false},
            {value: "Condition 3", checked: false},
            {value: "Condition 4", checked: false}
        ];
    let selectedQuestions = [];

    $:  questions = {...questions,
        [day]: [
            {value: "Condition 1", checked: false},
            {value: "Condition 2", checked: false},
            {value: "Condition 3", checked: false},
            {value: "Condition 4", checked: false},
    ]
    };


    $: {
        selectedQuestions = questions.savedValues[day]
};

    $: selectedQuestions = Object.fromEntries(Object.entries(questions).filter(([key, value]) => key == day))

    $: day = day;
    $: readDate = new Date(day);
    $: mm = readDate.toLocaleString("en-US", {month: "long"});
    $: dd = readDate.toLocaleString("en-US", {day: "numeric"});
    $: yyyy = readDate.toLocaleString("en-US", {year: "numeric"});

    onMount(async () => {
        day = new Date()
    });
</script>

<main>
        <div class="row">
            <div class="col-sm">
                <Datepicker pickerRule='singleChoice' bind:pickerResult={day}/>
            </div>
            <div class="col-sm">
                <p>{mm} {dd}, {yyyy}</p>
            <ul>
                {#each questions as question}
                <li>
                    <input type=checkbox checked={question.checked}>
                    {question.value}
                </li>
                {/each}

            </ul>
            </div>
</main>

Текущая проблема заключается в том, что я не уверен, как получить доступ к отфильтрованному объекту и правильно ли я к нему обращаюсь.

Чтобы резюмировать рабочий процесс, необходимо выполнить следующее:

  1. Пользователь загружает страницу, отображаются параметры и по умолчанию значение false.
  2. Пользователь выбирает параметры для первого свидания, они сохраняются, и пользователь переходит на новый день.
  3. Представлен новый список флажков, все по умолчанию имеют значение false. Пользователь обновляет параметры, и они сохраняются.
  4. Пользователь повторно просматривает элемент и обновляет ранее введенную информацию.

Комментарии:

1. Возможно, это вам поможет: svelte.dev/tutorial/group-inputs

2. Не могли бы вы предоставить codesandbox ?

3. @johannchopin По какой-то причине пакеты Svelte и NPM плохо сочетаются в codesandbox. Я попытался собрать их вместе перед созданием сообщения, но не смог заставить календарь работать должным образом.

4. @Hayden календарь работает в REPL

5. Пока у вас есть учетная запись на Github, вы можете создавать, сохранять, делиться прямыми ссылками, просматривать сохраненные проекты. Просто войдите в систему с помощью Github, нажав на кнопку, показанную здесь . После того, как у вас есть сохраненный проект, вы можете просто захватить URL-адрес и поделиться им.

Ответ №1:

Вам нужно:

1. Обновитесь praecox-datepicker до версии 1.0 или выше.

2. Используйте bind:selected для получения выбранного результата.

3. Передайте результат выбора (дату начала) в viewDate свойство, чтобы синхронизировать представление.

4. Если вы хотите получить своевременный ответ, пожалуйста, отправьте вопрос непосредственно на Github.

REPL

Показать еще.