Displaying user data on cards js-CodePudding

There was a problem adding user data to cards. More precisely, I didn’t quite understand how to do this, I know that there are fetch requests, but if there is a json file, and I have a regular js file (here it is userData.js https://playcode.io/919658), how can I connect the data correctly from another file? Thanks a lot in advance.

const userData = [
    {
        "id": 1,
        "name": "John",
        "description": "fafewqrewrqwer2322revzd",
        "profilePicture": "https://images.unsplash.com/1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    },
    {
        "id": 2,
        "name": "Josh",
        "description": "qweqwsxasdqwew",
        "profilePicture": "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    },
    {
        "id": 3,
        "name": "Jane",
        "description": "yjtykyumjhjhjkgjhhjkhkj",
        "profilePicture": "https://media.istockphoto.com/photos/elegant-beauty-picture-id516208984?k=20&m=516208984&s=612x612&w=0&h=KooFBmqHtO2lz5CFV5Oe87u_12wgKCxHvTHxlYuErCU="
    },
    {
        "id": 4,
        "name": "Iness",
        "description": "k4jh23k4jh23kjhk2jhk",
        "profilePicture": "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=388&q=80"
    }
]


const root = document.querySelector('#root')


function section() {
    const section = document.createElement('section') 
    section.classList.add('section');
    return section;
}

// function article() {
//     const article = document.createElement('article') 
//     article.classList.add('article');
//     return article;
// }

// function img(imgSrc) {
//     const img = document.createElement('img')
//     img.setAttribute('src', imgSrc); 
//     img.classList.add('img');
//     return img;
// }

// function h1() {
//     const h1 = document.createElement('h1') 
//     h1.textContent = 'Name';
//     h1.classList.add('h1');
//     return h1;
// }

// function p() {
//     const p = document.createElement('p')
//     h1.textContent = 'Description';
//     p.classList.add('p');
//     return p;
// }

function button() {
    const button = document.createElement('button')
    button.classList.add('button')
    return button;
}

const userCards = userData.map(section);
root.append(...userCards);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    font-size: 62.5%;
    --font-size-sm: 2rem;
    --font-size-md: 2.4rem;
  }
  
  body {
      min-height: 100vh;
      background-color: blanchedalmond;
  }
  
  #root {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    padding: 10%;
  }
  
  section {
      position: relative;
      padding: 1.2rem;
      width: 100%;
      height: 350px;
      border: 2px solid black;
      background-color: white;
      border-radius: 15px;
  }
  
  .section-name {
    font-size: var(--font-size-md, 24px);
  }
  
  .section-desc {
    font-size: var(--font-size-sm, 18px);
    padding: 2rem 0;
  }
  
  article {
      text-align: center;
      margin-top: 20%;
  }
  
  img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
  }
  
  button {
      background-color: hsl(229deg 100% 73%);
      border: none;
      width: 120px;
      height: 40px;
      border-radius: 10px;
      font-size: 15px;
      font-family: Arial, Helvetica, sans-serif;
      color: white;
      cursor: pointer;
      box-shadow: 0 0 5px 0 black;
      margin-top: 20px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <!-- <script src='./UsersData.js' defer></script>  -->
    <script src='./script.js' defer></script> 
    <title>Usercards</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

CodePudding user response：

You can create the section and inside you can pass parameters to these functions h1 for name, img for profilePicture and p for description, and then create article and append all of these inside and append the article to the section and lastly append the sections inside the root element.

const userData = [
    {
        "id": 2,
        "name": "Josh",
        "description": "qweqwsxasdqwew",
        "profilePicture": "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    },
    {
        "id": 3,
        "name": "Jane",
        "description": "yjtykyumjhjhjkgjhhjkhkj",
        "profilePicture": "https://media.istockphoto.com/photos/elegant-beauty-picture-id516208984?k=20&m=516208984&s=612x612&w=0&h=KooFBmqHtO2lz5CFV5Oe87u_12wgKCxHvTHxlYuErCU="
    },
    {
        "id": 4,
        "name": "Iness",
        "description": "k4jh23k4jh23kjhk2jhk",
        "profilePicture": "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=388&q=80"
    }
]


const root = document.querySelector('#root')


function section(user) {
    const section = document.createElement('section') 
    section.classList.add('section');
    const userArticle = article()
    const userDesc = p(user.description);
    const userImg = img(user.profilePicture);
    const userHeading = h1(user.name)
    userArticle.appendChild(userImg)
    userArticle.appendChild(userHeading)
    userArticle.appendChild(userDesc)
    section.appendChild(userArticle)
    return section;
}

function article(desc) {
  const article = document.createElement('article')
  article.textContent = desc;
  article.classList.add('article');
  return article;
}

function img(imgSrc) {
  const img = document.createElement('img')
  img.setAttribute('src', imgSrc); 
  img.classList.add('img');
  return img;
}

function h1(name) {
  const h1 = document.createElement('h1')
  h1.textContent = `Name: ${name}`;
  h1.classList.add('h1');
  return h1;
}

function p(desc) {
  const p = document.createElement('p')
  p.textContent = `Description: ${desc}`;
  p.classList.add('p');
  return p;
}

function button() {
    const button = document.createElement('button')
    button.classList.add('button')
    return button;
}

const userCards = userData.map(section);
root.append(...userCards);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    font-size: 62.5%;
    --font-size-sm: 2rem;
    --font-size-md: 2.4rem;
  }
  
  body {
      min-height: 100vh;
      background-color: blanchedalmond;
  }
  
  #root {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    padding: 10%;
  }
  
  section {
      position: relative;
      padding: 1.2rem;
      width: 100%;
      height: 350px;
      border: 2px solid black;
      background-color: white;
      border-radius: 15px;
  }
  
  .section-name {
    font-size: var(--font-size-md, 24px);
  }
  
  .section-desc {
    font-size: var(--font-size-sm, 18px);
    padding: 2rem 0;
  }
  
  article {
      text-align: center;
      margin-top: 20%;
  }
  
  img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
  }
  
  button {
      background-color: hsl(229deg 100% 73%);
      border: none;
      width: 120px;
      height: 40px;
      border-radius: 10px;
      font-size: 15px;
      font-family: Arial, Helvetica, sans-serif;
      color: white;
      cursor: pointer;
      box-shadow: 0 0 5px 0 black;
      margin-top: 20px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <!-- <script src='./UsersData.js' defer></script>  -->
    <script src='./script.js' defer></script> 
    <title>Usercards</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

CodePudding user response：

The problem is you are trying to access the div with the id="root" before the it's taken into account.

To fix it just wrap your code inside of window.addEventListener('DOMContentLoaded', ...) like the following .js code:

const userData = [
    {
        "id": 1,
        "name": "John",
        "description": "fafewqrewrqwer2322revzd",
        "profilePicture": "https://images.unsplash.com/1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    },
    {
        "id": 2,
        "name": "Josh",
        "description": "qweqwsxasdqwew",
        "profilePicture": "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    },
    {
        "id": 3,
        "name": "Jane",
        "description": "yjtykyumjhjhjkgjhhjkhkj",
        "profilePicture": "https://media.istockphoto.com/photos/elegant-beauty-picture-id516208984?k=20&m=516208984&s=612x612&w=0&h=KooFBmqHtO2lz5CFV5Oe87u_12wgKCxHvTHxlYuErCU="
    },
    {
        "id": 4,
        "name": "Iness",
        "description": "k4jh23k4jh23kjhk2jhk",
        "profilePicture": "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=388&q=80"
    },
    {
        "id": 5,
        "name": "Alex",
        "description": ";oiu;oxzkxfaklwejlkwej",
        "profilePicture": "https://images.unsplash.com/flagged/photo-1573740144655-bbb6e88fb18a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80"
    },
    {
        "id": 6,
        "name": "Nathan",
        "description": "lkheklerhtlk3jtk34jh5kjhkwekfjekjfahe",
        "profilePicture": "https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
    },
    {
        "id": 7,
        "name": "Tracy",
        "description": "rerewervdfgdfgsdfgsdgsdfgsdfg",
        "profilePicture": "https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
    },
    {
        "id": 8,
        "name": "James",
        "description": "yjtykyumjhjhjkgjhhjkhkj",
        "profilePicture": "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    }
]


window.addEventListener('DOMContentLoaded', () => {
const root = document.querySelector('#root')


function section() {
    const section = document.createElement('section') 
    section.classList.add('section');
    return section;
}

// function article() {
//     const article = document.createElement('article') 
//     article.classList.add('article');
//     return article;
// }

// function img(imgSrc) {
//     const img = document.createElement('img')
//     img.setAttribute('src', imgSrc); 
//     img.classList.add('img');
//     return img;
// }

// function h1() {
//     const h1 = document.createElement('h1') 
//     h1.textContent = 'Name';
//     h1.classList.add('h1');
//     return h1;
// }

// function p() {
//     const p = document.createElement('p') 
//     p.classList.add('p');
//     return p;
// }

function button() {
    const button = document.createElement('button')
    button.classList.add('button')
    return button;
}

const userCards = userData.map(section, button);
root.append(...userCards);
})

Note: just copy it and paste it into your .js file.