<div 
  x-data="{
    todos: {
      1: {
        id: 1,
        text: 'todo-1'
      },
      2: {
        id: 2,
        text: 'todo-2'
      }
    },
    sections: Array.from(document.querySelectorAll('h3[id]')).map(e => ({ id: e.id, text: e.innerText })),
    heading: location.hash
  }" 
                                                                                                                                                                                                                                                                                      x-init="heading && window.scrollTo({
    top: $el.querySelector(heading).offsetTop
  })" class="md:w-2/3 mx-auto flex flex-col pb-8">
  <div class="leading-tight mb-4">
    <strong class="block">Table of contents</strong>
    <ul class="list-inside pt-2 mb-4">
      <template 
        x-for="section in sections" :key="section.id"
      >
        <li class="list-disc w-full">
          <a class="text-blue-500 hover:text-blue-800 hover:underline" :href="`#${section.id}`" 
            x-text="section.text"
          ></a>
        </li>
      </template>
    
        <li class="list-disc w-full">
          <a class="text-blue-500 hover:text-blue-800 hover:underline" :href="`#${section.id}`" 
            x-text="section.text" href="#ids-only"
          >Only need the keys/ids - use Object.keys</a>
        </li>
      
        <li class="list-disc w-full">
          <a class="text-blue-500 hover:text-blue-800 hover:underline" :href="`#${section.id}`" 
            x-text="section.text" href="#ids-content-entries"
          >Need keys/ids and values - use Object.entries</a>
        </li>
      
        <li class="list-disc w-full">
          <a class="text-blue-500 hover:text-blue-800 hover:underline" :href="`#${section.id}`" 
            x-text="section.text" href="#ids-content-keys"
          >Need keys/ids and values - use Object.keys + lookup</a>
        </li>
      
        <li class="list-disc w-full">
          <a class="text-blue-500 hover:text-blue-800 hover:underline" :href="`#${section.id}`" 
            x-text="section.text" href="#content-values"
          >Need only values - use Object.values</a>
        </li>
      
        <li class="list-disc w-full">
          <a class="text-blue-500 hover:text-blue-800 hover:underline" :href="`#${section.id}`" 
            x-text="section.text" href="#content-keys"
          >Need values - use Object.keys + lookup</a>
        </li>
      </ul>
    <p>
      See the full post on
      <a class="text-blue-500 hover:text-blue-800 hover:underline" href="https://codewithhugo.com/">
        @todo</a>
    </p>
  </div>
  <div>
    <strong>
      x-data state:</strong>
    <pre
    ><code 
      x-text="JSON.stringify({ todos }, null, 2)"
    >{
  "todos": {
    "1": {
      "id": 1,
      "text": "todo-1"
    },
    "2": {
      "id": 2,
      "text": "todo-2"
    }
  }
}</code></pre>
  </div>
  <div class="mb-8"
  >
    <h3 class="text-xl font-semibold text-gray-900" id="ids-only">
      Only need the keys/ids - use <code>Object.keys</code>
    </h3>
    <ul>
      <template 
        x-for="id in Object.keys(todos)" :key="id"
      >
        <li>id: <span 
          x-text="id"
        ></span></li>
      </template>
    
        <li>id: <span 
                x-text="id"
              >1</span></li>
      
        <li>id: <span 
                  x-text="id"
                >2</span></li>
      </ul>
  </div>
  <div class="mb-8">
    <h3 class="text-xl font-semibold text-gray-900" id="ids-content-entries">
      Need keys/ids and values - use <code>Object.entries</code>
    </h3>
    <select>
      <template 
        x-for="[id, value] in Object.entries(todos)" :key="id"
      >
        <option :value="id" 
          x-text="value.text"
        ></option>
      </template>
    
        <option :value="id" 
                x-text="value.text" value="1"
              >todo-1</option>
      
        <option :value="id" 
                  x-text="value.text" value="2"
                >todo-2</option>
      </select>
  </div>
  <div class="mb-8">
    <h3 class="text-xl font-semibold text-gray-900" id="ids-content-keys">
      Need keys/ids and values - use <code>Object.keys</code> + lookup
    </h3>
    <select>
      <template 
        x-for="id in Object.keys(todos)" :key="id"
      >
        <option :value="id" 
          x-text="todos[id].text"
        ></option>
      </template>
    
        <option :value="id" 
                x-text="todos[id].text" value="1"
              >todo-1</option>
      
        <option :value="id" 
                  x-text="todos[id].text" value="2"
                >todo-2</option>
      </select>
  </div>
  <div class="mb-8">
    <h3 class="text-xl font-semibold text-gray-900" id="content-values">
      Need only values - use <code>Object.values</code>
    </h3>
    <ul>
      <template 
        x-for="todo in Object.values(todos)" :key="todo"
      >
        <li 
          x-text="todo.text"
        ></li>
      </template>
    
        <li 
                x-text="todo.text"
              >todo-1</li>
      
        <li 
                  x-text="todo.text"
                >todo-2</li>
      </ul>
  </div>
  <div>
    <h3 class="text-xl font-semibold text-gray-900" id="content-keys">
      Need values - use <code>Object.keys</code> + lookup
    </h3>
    <ul>
      <template 
        x-for="id in Object.keys(todos)" :key="id"
      >
        <li 
          x-text="todos[id].text"
        ></li>
      </template>
    
        <li 
                x-text="todos[id].text"
              >todo-1</li>
      
        <li 
                  x-text="todos[id].text"
                >todo-2</li>
      </ul>
  </div>
</div>