List item is not splitting data into two separate columns jquery-CodePudding

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 >${(prop.toUpperCase()   ': ', obj[prop])}</li>`;
                        
document.getElementById("result-list").insertAdjacentHTML('beforeend', markup);

ul {
color: white;
    text-align: left;
}

<ul id="result-list" ></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.

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;
}

CodePudding user response：

I think you have an issue in this part const markup = `<li >${(prop.toUpperCase() ': ', obj[prop])}</li>`; Please change it to markup = `<li >${(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 >${(prop.toUpperCase()   ': ' obj[prop])}</li>`;
  });
});


                        
document.getElementById("result-list").insertAdjacentHTML('afterend', markup);

CodePudding user response：

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);
  
});