Как читать данные Json с помощью Knockout?

// Set up view model
const activeStoryId = ko.observable(1)
  // This forces a re-render if we ever want to loop back to the current story
  .extend({ notify: "always" });
  
const activeStory = ko.pureComputed(() => 
  story[activeStoryId()] ?? 
  // Default to "The end" so user can restart
  { text: "The end", choices: [{ choiceText: "Back to start", storyLink: 1 }] }
);

const onChoice = ({ storyLink }) => activeStoryId(storyLink);

// Apply bindings
registerBinding();
ko.applyBindings({
  onChoice,
  activeStory
});

function registerBinding() {
  ko.bindingHandlers.typeWriter = {
    init: (el, va) => {
      const partialText = ko.observable("");
      let animation;

      const effect = ko.computed(() => {
        const t0 = Date.now();
        const fullText = ko.unwrap(va());
        const duration = fullText.length * 30; // 10ms per char

        animation = requestAnimationFrame(next);

        function next() {
          const p = (Date.now() - t0) / duration;
          if (p >= 1) {
            partialText(fullText);
          }

          partialText(
            fullText.slice(0, Math.round(p * fullText.length))
          );

          animation = requestAnimationFrame(next);
        }
      });

      ko.applyBindingsToNode(el, {
        text: partialText
      });

      ko.utils.domNodeDisposal.addDisposeCallback(el, () => {
        cancelAnimationFrame(animation);
        effect.dispose();
      });
    }
  }
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script>
  const story = {"1":{"text":"You are standing in front of a big castle. What do you do?","choices":[{"choiceText":"Enter the castle","storyLink":"2"},{"choiceText":"Walk around the castle","storyLink":"3"}]},"2":{"text":"You are inside the castle. You see two doors. Which one do you choose?","choices":[{"choiceText":"Left door","storyLink":"4"},{"choiceText":"Right door","storyLink":"5"}]},"3":{"text":"You are walking around the castle. Suddenly, you are attacked by a monster. What do you do?","choices":[{"choiceText":"Fight the monster","storyLink":"6"},{"choiceText":"Run away","storyLink":"7"}]},"4":{"text":"You find a treasure chest. What do you do?","choices":[{"choiceText":"Open the chest","storyLink":"8"},{"choiceText":"Leave the chest and continue","storyLink":"9"}]},"5":{"text":"You find yourself in a room with no way out. What do you do?","choices":[{"choiceText":"Search for a hidden passage","storyLink":"10"},{"choiceText":"Scream for help","storyLink":"7"}]},"6":{"text":"You fought bravely, but the monster was too strong. You died.","choices":[]},"7":{"text":"You run away and find yourself in front of the castle. What do you do?","choices":[{"choiceText":"Enter the castle","storyLink":"2"},{"choiceText":"Walk around the castle","storyLink":"3"}]},"8":{"text":"You found a magical sword inside the chest. What do you do?","choices":[{"choiceText":"Leave the castle with the sword","storyLink":"11"},{"choiceText":"Continue exploring the castle","storyLink":"2"}]},"9":{"text":"You continue exploring the castle and find a secret passage. What do you do?","choices":[{"choiceText":"Enter the passage","storyLink":"12"},{"choiceText":"Leave the passage and continue","storyLink":"5"}]},"10":{"text":"You found a hidden passage and escaped from the room. What do you do?","choices":[{"choiceText":"Continue exploring the castle","storyLink":"2"},{"choiceText":"Leave the castle","storyLink":"11"}]}}
</script>

<div data-bind = "with: activeStory">
  <p data-bind = "typeWriter: text" style = "min-height: 50px"></p>
  
  <!-- ko foreach: choices -->
  <button data-bind = "click: $root.onChoice, text: choiceText"></button>
  <!-- /ko -->
</div>