how to convert json to array in javascript for an li list

Question

I have a JSON string the is pulled and returns the following.

var result = {
  "0": { NAME: "NONE" },
  "1": { NAME: "REGISTRATION" },
  "2": { NAME: "PAPER" },
  "3": { NAME: "BLACK" },
  "4": { NAME: "C=100M=0Y=0K=0" },
  "5": { NAME: "C=0M=100Y=0K=0" },
  "6": { NAME: "C=0M=0Y=100K=0" },
  "7": { NAME: "C=15M=100Y=100K=0" },
  "8": { NAME: "C=75M=5Y=100K=0" },
  "9": { NAME: "C=100M=90Y=10K=0" }
};

These are colors from an InDesign document. I am trying to convert to a string in javascript and everything I have tried is not working.

the closest I have gotten is the following

var result = {
  "0": { NAME: "NONE" },
  "1": { NAME: "REGISTRATION" },
  "2": { NAME: "PAPER" },
  "3": { NAME: "BLACK" },
  "4": { NAME: "C=100M=0Y=0K=0" },
  "5": { NAME: "C=0M=100Y=0K=0" },
  "6": { NAME: "C=0M=0Y=100K=0" },
  "7": { NAME: "C=15M=100Y=100K=0" },
  "8": { NAME: "C=75M=5Y=100K=0" },
  "9": { NAME: "C=100M=90Y=10K=0" }
};

var listEl = document.getElementById('swatches');
    makeList(result,listEl);

function makeList(jsonObject, listElement) {
  //iterate through the array or object
  for (var i in jsonObject) {
    //insert the next child into the list as a <li>
    var newLI = document.createElement("li");
    newLI.innerHTML += jsonObject[i];
    listElement.appendChild(newLI);
  }
}

<div class="dropdown-container">
<!--  <ul class="swatches" id="swatches" onchange="swatchIndex()">-->
  <ul class="swatches" id="swatches" onchange="swatchIndex()">
    <li class="cell" id="cell">
      None
      <div class="colorBox"></div>
      <!--END COLOR BOX-->
    </li>
    <!--END LI-->
  </ul>
  <!--END SWATCHES-->
</div>

any ideas out there?

How `listElement` looks like? Please update the question with relevant HTML. — Mamun, Jan 09 '20 at 04:38

score 0 · Accepted Answer · answered Jan 09 '20 at 04:31

0

add extra [] to your string and use the code below:

var myObject = eval('(' + myJSONtext + ')');

test this using this.

var s =" [{'id':1,'name':'Test1'},{'id':2,'name':'Test2'}]"; var myObject = eval('(' + s + ')'); for (i in myObject) { alert(myObject[i]["name"]); }

answered Jan 09 '20 at 04:31

Harsh Bansal

26
6

hey Harsh, this is not giving me an error anymore, but how can i line them up in an li list. i have added code abobe – Blue Moose Jan 09 '20 at 05:10
this is definitely unnecessary, plus only use eval when necessary. and in this case, definitely, there are no reasons to use it, there are many alternatives. I would recommand Tân answer over this one. For details, see https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea – CHANist Jan 09 '20 at 05:34

score 0 · Answer 2 · answered Jan 09 '20 at 04:32

I can only think about it:

var result = {"0":{"NAME":"NONE"},
"1":{"NAME":"REGISTRATION"},
"2":{"NAME":"PAPER"},
"3":{"NAME":"BLACK"},
"4":{"NAME":"C=100M=0Y=0K=0"},
"5":{"NAME":"C=0M=100Y=0K=0"},
"6":{"NAME":"C=0M=0Y=100K=0"},
"7":{"NAME":"C=15M=100Y=100K=0"},
"8":{"NAME":"C=75M=5Y=100K=0"},
"9":{"NAME":"C=100M=90Y=10K=0"}};

function makeList(jsonObject, listElement) {
  //iterate through the array or object
  for(var i in jsonObject) { 
      //insert the next child into the list as a <li>
      var newLI = document.createElement('li');
      newLI.innerHTML += jsonObject[i].NAME;
      listElement.appendChild(newLI);                
  }
}

makeList(result, document.querySelector('ul'));

<ul></ul>

how to convert json to array in javascript for an li list

2 Answers2