• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

javascript users-from-promise

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
59 wizyt
pytanie zadane 24 listopada w JavaScript przez Rafael Milewski Nowicjusz (120 p.)
edycja 25 listopada przez Rafael Milewski
const users = [
  { id: 5, name: "user 5" },
  { id: 3, name: "user 3" },
  { id: 1, name: "user 1" },
  { id: 2, name: "user 2" },
  { id: 4, name: "user 4" },
  { id: 8, name: "user 8" },
  { id: 7, name: "user 7" }
];

const getUsers = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(users);
    }, 300);
  });
};

export { users, getUsers };

date.js

import "./styles.css";
import { users, getUsers } from "./data.js";

document.getElementById("app").innerHTML = `
<ul>
  <li>Sort <b>users</b> array and display list of user names 
  inside div with class <b>sorted-array</b> instead placeholder</li>
  <li>Find user with id equals to 4 and display 
      its name inside div with <b>data-user</b> attribute 
      equal to <b>4</b> instead placeholder</li>
  <li>By using of function <b>getUsers</b> Load list of user 
  names inside div with id <b>users-from-promise</b> instead placeholder</li>
</ul>
<h2>Sorted users</h2>
<div class="sorted-array">
  <i>placeholder</i>
</div>
<h2>User with id 4</h2>
<div data-user="4">
  <i>placeholder</i>
</div>
<h2>Users from promise</h2>
<div id="users-from-promise">
  <i>placeholder</i>
</div>
`;

index.js

body {
  font-family: sans-serif;
}

styles.css

<!DOCTYPE html>
<html>

<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
</head>

<body>
	<div id="app"></div>

	<script src="src/index.js">
	</script>
</body>

</html>

index.html

<!DOCTYPE html>
<html>
  <style>
    li,
    div {
      width: 10em;
      font: 400 0.95em system-ui;
      padding: 0.05em 0.5em;
    }
    li span {
      float: right;
      font: 700 0.7em system-ui;
    }
    .highlighted {
      background-color: lime;
    }
  </style>
  <body onload="init()">

    <script>
      const mydiv = document.createElement('div');
      mydiv.id = 'mydiv';
      document.body.appendChild(mydiv);

      const users = [
  { id: 5, name: "user 5" },
  { id: 3, name: "user 3" },
  { id: 1, name: "user 1" },
  { id: 2, name: "user 2" },
  { id: 4, name: "user 4" },
  { id: 8, name: "user 8" },
  { id: 7, name: "user 7" }
];   

      function init() {
        displaySortedUserList();
        findUserIdEquals(4);
      }

      function displaySortedUserList() {
        const sorted_names = users.sort((a, b) => {
          const af = a.name.toLowerCase(),
                bf = b.name.toLowerCase(),
                as = a.name.toLowerCase(),
                bs = b.name.toLowerCase();

          if(af == bf)
            return (as < bs) ? -1 : (as > bs) ? 1 : 0;
          else
            return (af < bf) ? -1 : 1;
        });

        const list_names = sorted_names.map((row)=>(
          `<li id="${row.id}">${row.name}<span>[id - ${row.id}]</span></li>`));
        mydiv.innerHTML = `<ol>${list_names.join('')}</ol>`;
        mydiv.classList.add('sorted-array'); 
      }

      function findUserIdEquals(id) {
        const list_names = document.querySelectorAll('.sorted-array li');
        for (const row of list_names)
          if (row.id == id) {
            row.classList.add('highlighted');
            mydiv.innerHTML += `<div data-user="${id}">${row.textContent}</div>`;
          }
      }
    </script>
  </body>
</html>
troche zmienilem i chybo oto im chodzi 

 

1
komentarz 24 listopada przez ScriptyChris Mędrzec (187,840 p.)

Wstaw proszę kod w odpowiedni bloczek.

By using of function getUsers Load list of user names inside div with id users-from-promise

Z tego wynika, że powinieneś mieć jakieś API, z którego pobierzesz użytkowników. Możesz to względnie zamockować, ale nie wiem czy o to chodzi w zadaniu.

komentarz 24 listopada przez VBService Ekspert (204,430 p.)
edycja 25 listopada przez VBService

BTW, pierwszy punkt

Sort users array and display list ... with class sorted-array

czy tu nie chodzi o np. <ol>

[ on-line ]

const users = [
  { id: 5, name: 'John',    surname: 'Doe'     },
  { id: 3, name: 'Alex',    surname: 'Doe'     },
  { id: 1, name: 'Timothy', surname: 'Diaz'    },
  { id: 2, name: 'Elon',    surname: 'Doe'     },
  { id: 4, name: 'John',    surname: 'Stone'   },
  { id: 8, name: 'William', surname: 'Barrera' },
  { id: 7, name: 'Crystal', surname: 'Bell'    },
  { id: 6, name: 'Michael', surname: 'Curtis'  }
];      

function displaySortedUserList() {
  const sorted_names = users.sort((a, b) => {
    const af = a.surname.toLowerCase(),
          bf = b.surname.toLowerCase();

    if (af == bf) {
      const as = a.name.toLowerCase(),
            bs = b.name.toLowerCase();
      return (as < bs) ? -1 : (as > bs) ? 1 : 0;
    } else return (af < bf) ? -1 : 1;
  });

  const list_names = sorted_names.map((row)=>(
    `<li id="${row.id}">${row.name} ${row.surname}</li>`));
  mydiv.innerHTML = `<ol>${list_names.join('')}</ol>`;
  mydiv.classList.add('sorted-array'); 
}

 

Sprawdź: How to obtain username from Promise ...?

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 118 wizyt
pytanie zadane 13 września 2018 w JavaScript przez Apper97 Obywatel (1,380 p.)
0 głosów
1 odpowiedź 206 wizyt
pytanie zadane 6 czerwca 2020 w JavaScript przez lukas_1994 Nowicjusz (150 p.)
0 głosów
2 odpowiedzi 262 wizyt
pytanie zadane 24 kwietnia 2020 w JavaScript przez maslokeeper01 Użytkownik (620 p.)

89,758 zapytań

138,361 odpowiedzi

309,417 komentarzy

59,673 pasjonatów

Advent of Code 2022

Top 15 użytkowników

  1. 908p. - Argeento
  2. 877p. - nidomika
  3. 851p. - Michal Drewniak
  4. 848p. - Mikbac
  5. 846p. - rucin93
  6. 838p. - Łukasz Eckert
  7. 835p. - ssynowiec
  8. 822p. - TheLukaszNs
  9. 794p. - JMazurkiewicz
  10. 787p. - Hubert Chęciński
  11. 786p. - adrian17
  12. 760p. - Mawrok
  13. 752p. - Vinox
  14. 694p. - overcq
  15. 692p. - 13NOONE37
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...