Question 43179 in Html Question posted in
Some basic documentation can be found here.

Error while displaying filtered values in console – Html

I want to display the name and age of people whose age is less than 26 using map and filter from the object ’emp’ . I want the data to go in the #app id in HTML and be displayed when I open the file with live server extension.
I want it to get displayed from the Javascript without changing anything in the HTML file.
It should be displayed like this : name : age
But I can’t figure it out and javaScript is showing TypeError while I use app.innerHTML

For Eg:

let emp = [
  {
    name: "abc",
    age: 30
  },
  {
    name: "xyz",
    age: 25
  },
  {
    name: "cde",
    age: 20
  },
  {
    name: "fgh",
    age: 28
  }
];

Output:
xyz : 25
cde : 20

HTML Code:

<!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">
    <title>Q1</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app"></div>

    <!-- JavaScript -->
    <script src="./script.js"></script>
</body>
</html>

JavaScript Code:

let emp = [
  {
    name: "abc",
    age: 30
  },
  {
    name: "xyz",
    age: 25
  },
  {
    name: "cde",
    age: 20
  },
  {
    name: "fgh",
    age: 28
  }
];


const result = emp.filter((val) => {
    return val.age < 26;
});

console.log(result);

let app = document.getElementById("app");

result.forEach((val) => {
  const newInfo = `${val.name} : ${val.age}`;
  console.log("Data -> ", newInfo);
  const prevInfo = app.innerHTML;
  app.innerHTML = prevInfo + newInfo;
});
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I just have to use the template literals and store the newInfo and prevInfo into paragraph tag as they are block elements they will take the full length and the new info will come on different line

    JavaScript Code:

    let emp = [
  {
    name: "abc",
    age: 30
  },
  {
    name: "xyz",
    age: 25
  },
  {
    name: "cde",
    age: 20
  },
  {
    name: "fgh",
    age: 28
  }
];


const result = emp.filter((val) => {
  return val.age < 26;
});

console.log(result);

let app = document.getElementById("app");

result.forEach((val) => {
  const newInfo = `${val.name} : ${val.age}`;
  console.log("Data -> ", newInfo);
  const prevInfo = app.innerHTML;
  app.innerHTML = `<p>${prevInfo}</p> <p>${newInfo}</p>`;
});

  2. 0

    it seems the error is that you are trying to get a element with the id app in your javascript code, but only have an element with this class. To change that, use this HTML code:

    <!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">
    <title>Q1</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app"></div>

    <!-- JavaScript -->
    <script src="./script.js"></script>
</body>
</html>

    as other people already mentioned.

    Also you probably don’t want to replace the content every time, but just want to add something. Also .map isn’t the right function, you probably want to use forEach here. The full javascript code for this would be:

    let emp = [
  {
    name: "abc",
    age: 30
  },
  {
    name: "xyz",
    age: 25
  },
  {
    name: "cde",
    age: 20
  },
  {
    name: "fgh",
    age: 28
  }
];


const result = emp.filter((val) => {
    return val.age < 26;
});

let app = document.getElementById("app");

result.forEach((val) => {
  const dataToShow = `${val.name} : ${val.age}`;
  console.log("Data -> ", dataToShow);
  app.innerHTML += `${dataToShow}<br>`;
});

    Array.map is used to change values in an array, while forEach just iterates over it

    Login or Signup to reply.
  3. 0

    Just replace class="app" with id="app" to make it works.

    let emp = [
  {
    name: "abc",
    age: 30
  },
  {
    name: "xyz",
    age: 25
  },
  {
    name: "cde",
    age: 20
  },
  {
    name: "fgh",
    age: 28
  }
];


const result = emp.filter((val) => {
    return val.age < 26;
});

let app = document.getElementById("app");

result.map((val) => {
  const dataToShow = `${val.name} : ${val.age}`;
  console.log("Data -> ", dataToShow);
  app.innerHTML =`${dataToShow}`;
});
    <!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">
    <title>Q1</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app"></div>

    <!-- JavaScript -->
    <script src="./script.js"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search