Create an object for a car that displays each of its properties in <li>-CodePudding

I want the car properties to be printed for the li tag on the page. I mean to show name and other properties like a list.

let car={
            name: "benz",
            type: "mercedes",
            price: 5000
            return this.name   this.type   this.price;
        }
 
let result="";
let p=document.querySelectorAll("ul li");
for(p in car){
result= result  car[p];

}
document.write(result);

<body>
     <div>
            <ul id="carr">
            <li>name:</li>
            <li>type:</li>
            <li>price:</li>
            </ul><br><br>
      </div>
            </body>

CodePudding user response：

If I understood you correctly, then this should give you some idea.

const myCar = {
   name: "benz",
   type: "mercedes",
   price: 5000,
};
 
function renderCar(car) {
   const listElement = document.getElementById("carr");
   listElement.innerHTML  = `
      <li>name: ${car.name}</li>
      <li>type: ${car.type}</li>
      <li>price: ${car.price}</li>
   `
}
renderCar(myCar);

<body>
     <div>
         <ul id="carr"></ul>
         <br /><br />
     </div>
</body>

If we have multiple cars (an array of objects), we can also iterate over the array and display an <li> for every property of every member.

CodePudding user response：

If you have a list of cars you can do something like this:

let cars = [{
    name: "benz",
    type: "mercedes",
    price: 5000
  },
  {
    name: "fiat",
    type: "punto",
    price: 6000
  },
  {
    name: "bmw",
    type: "i900",
    price: 7000
  },
  {
    name: "toyota",
    type: "corola",
    price: 8000
  }
]

let carsList = document.getElementById("carr");

cars.forEach(function(car, index) {
  let name = document.createElement("li");
  let type = document.createElement("li");
  let price = document.createElement("li");

  name.appendChild(document.createTextNode("Name: "   car.name));
  type.appendChild(document.createTextNode("Type: "   car.type));
  price.appendChild(document.createTextNode("Price: "   car.price));

  carsList.appendChild(name);
  carsList.appendChild(type);
  carsList.appendChild(price);
})

<body>
  <div>
    <ul id="carr"></ul>
    <br /><br />
  </div>
</body>

CodePudding user response：

You can apply it as follows. You can create javascript in html and place property on objects.

let car = {
      name: "benz",
      type: "mercedes",
      price: 5000
    }

    var propertyName = ['name', 'type', 'price'];

    let ulCreate = document.createElement('ul');

    document.body.appendChild(ulCreate);

    for (var prop in propertyName) {
      var li = document.createElement('li');
      li.innerHTML = propertyName[prop]   " :"   car[propertyName[prop]];
      ulCreate.appendChild(li);
    }

let car = [{
      name: "benz",
      type: "mercedes",
      price: 5000
    },{
      name: "A3",
      type: "audi",
      price: 8000
    },{
      name: "focus",
      type: "ford",
      price: 2500
    }]

    var propertyName = ['name', 'type', 'price'];

    let ulCreate = document.createElement('ul');

    document.body.appendChild(ulCreate);

    for (var cr in car) {
     for (var prop in propertyName) {
        var li = document.createElement('li');
        li.innerHTML = propertyName[prop]    ":"   car[cr][propertyName[prop]]
        ulCreate.appendChild(li);
      }
    }