Question 35773 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

List item is not splitting data into two separate columns jquery

Problem

I am trying to split some returned data into two separate columns as it displays only as a single column of data by default.

The script is as follows:

console.log(prop.toUpperCase() + ': ', obj[prop]);

const markup = `<li class="list-group-item">${(prop.toUpperCase() + ': ', obj[prop])}</li>`;
                        
document.getElementById("result-list").insertAdjacentHTML('beforeend', markup);
ul {
color: white;
    text-align: left;
}
<ul id="result-list" class="list-group"></ul>

Which gives the following in the console:

DESCRIPTION:  The Harvester
TYPE:  Restaurant
DESCRIPTION:  McDonalds
TYPE:  Fast food
etc etc...

However, in the front end I get:

The Harvester
Restaurant
McDonalds
Fast food
etc etc...

I would like to maintain the first column (effectively) shown by the console, which would have a DESCRIPTION heading (and hold all descriptions beneath), with the second column heading set as TYPE, which would hold all types beneath, e.g.

enter image description here

What I’ve tried

I’ve tried the following in my css, as well as a few other variations, but they don’t seem to work…

ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    color: white;
    text-align: left;
}
Tags:

3

Answers


  1. 0

    I think you have an issue in this part const markup = `<li class="list-group-item">${(prop.toUpperCase() + ': ', obj[prop])}</li>`; Please change it to markup += `<li class="list-group-item">${(prop.toUpperCase() + ': '+obj[prop])}</li>`

    According to my understanding, my full code is as follow:

    let data = [
  {"dscripiton": "The Harvester", "type":"Restaurant"}, 
  {"dscripiton": "McDonalds", "type":"Fast food"},
  {"dscripiton": "ok", "type":"ok?"}
]
var markup = "";
data.forEach((obj) => {
    Object.keys(obj).forEach((prop) => {
        console.log(prop.toUpperCase() + ': ', obj[prop]);
    markup += `<li class="list-group-item">${(prop.toUpperCase() + ': '+obj[prop])}</li>`;
  });
});


                        
document.getElementById("result-list").insertAdjacentHTML('afterend', markup);
    Login or Signup to reply.
  2. 0

    I think this is what you’ve trid. What I've tried

    let data = [
  {"dscripiton": "The Harvester", "type":"Restaurant"}, 
  {"dscripiton": "McDonalds", "type":"Fast food"},
  {"dscripiton": "etc etc", "type":"etc etc"}
]

data.forEach((obj) => {
  let el = document.createElement('li');
  el.className = "list-group-item";
  
  let arr = [];
  for(prop in obj) {
    el.innerHTML += `<span style="margin-left: 30px">${obj[prop]}</span>`;
  }
  console.log(el)
    document.getElementById("result-list").insertAdjacentHTML('beforeend', el.outerHTML);
  
});
    Login or Signup to reply.
  3. 0

    Use a table rather than a list.

    const data = [
    {description: "McDonalds", type: "Fast Food"},
    {description: "The Harvester", type: "Restaurant"}
];

data.forEach(({description, type}) => {
  const markup = `<tr class="list-group-item"><td>${description.toUpperCase()}</td><td>${type}</td></th>`;
  document.getElementById("result-table-body").insertAdjacentHTML('beforeend', markup);
});
    #result-table td, #result-table th {
  border: 1px solid black;
}
    <table id="result-table" class="list-group">
  <thead>
    <tr>
      <th>Description</th>
      <th>Type</th>
  </thead>
  <tbody id="result-table-body">
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search