How to parse list item in html to javascript array

Question

I'm to pass an array form php to javascript, my solution is use php to generate an html list items like following:

<ul id="data" class="hidden">
  <li value="0"> 
    <ul>
      <li value="id">1</li> 
      <li value="productLine">Vintage Cars</li> 
    </ul>
  </li>
  <li value="1"> 
    <ul>
      <li value="id">2</li> 
      <li value="productLine">Ships</li>    
    </ul>
   </li>
   <li value="2"> 
    <ul>
      <li value="id">3</li> 
      <li value="productLine">Trains</li>   
    </ul>
  </li>
</ul>

and use javascript DOM API to make it to an multidimensional associate array:

function selectProductLine(){
    var rootUlNode = document.getElementById('data');
    var rootLiNodes = rootUlNode.children;
    var hiddenHash = {};
    for(var i=0;i< rootLiNodes.length;i++){
        var rootLiNodeValue = rootLiNodes[i].getAttribute('value');     
        var liNodes = rootLiNodes[i].firstElementChild.children;
        for(var i=0; i < liNodes.length;i++){
            hiddenHash[rootLiNodeValue] = {};
            var liNodeValue = liNodes[i].getAttribute('value');
            var liNodeContent = liNodes[i].textContent;
            hiddengegHash[rootLiNodeValue][liNodeValue] = liNodeContent;
        }
    }
return hiddenHash;
}

But running the code can crash my browser, so I can't debug it, anyone can point out where my problem is? And I think there should be an element way to transfer data from php to javascript, like using json, could someone provide a better solution or resource on this topic?

You're using i for both loops, that causes some troubles. Use different variable name for inner loop. — Teemu
– Teemu, Commented Aug 22, 2012 at 6:05
@irrelephant sorry it should be variable hiddenHash, I just intentionally make it wrong, so the browser won't freeze, and I can't debug on that point — mko
– mko, Commented Aug 22, 2012 at 7:13

McGarnagle · Accepted Answer · 2012-08-22 06:04:53Z

1

If you have a PHP array, you can use [json_encode][1] to render it as a JSON object. For example:

<?php
$arr = array(
    array('id' => 1, 'productLine' => 'Vintage Cars'),
    array('id' => 2, 'productLine' => 'Ships')
);
echo 'var products = ' . json_encode($arr) . ';';
?>

Will render like this:

var products = [ { 'id': 1, 'productLine': 'Vintage Cars' }, { 'id': 2, 'productLine': 'Ships' } ];

answered Aug 22, 2012 at 6:04

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Flash Over a year ago

You should call JSON.parse on the string rather than just adding it in directly - it is much safer. stackoverflow.com/questions/1843343/json-parse-vs-eval

simme · Accepted Answer · 2012-08-22 06:09:25Z

0

Well, your script is ALMOST ok from what I can tell. However you've mispelled hiddenHash 5 lines from the bottom. If I just change hiddengeghash to hiddenhash it runs without errors in jsfiddle atleast. I took the liberty to add a document.write just to make sure it actually returns an array.

http://jsfiddle.net/2WBjJ/

I also changed the second i to i2 since they're used in the same loop

answered Aug 22, 2012 at 6:09

simme

1,57412 silver badges24 bronze badges

Comments

Flash · Accepted Answer · 2012-08-22 06:20:16Z

0

A better way is to encode the data structure as JSON in PHP, and then call JSON.parse() on the resulting string client-side. You can use json_encode to encode the data and json2.js to parse the string.

Be careful to escape the JSON string appropriately.

edited Aug 22, 2012 at 6:20

answered Aug 22, 2012 at 6:06

Flash

16.9k15 gold badges74 silver badges100 bronze badges

Collectives™ on Stack Overflow

How to parse list item in html to javascript array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related