Dispaly Array Items in Divs

JavaScript
1

Hi there,

I have a php array as follows:

<?php
$brand = array (
"nike" => array (
                array( 'logo'=>'images/nike.png', 'description'1=>'some nike text'),
                array( 'logo'=>'images/nike.png', 'description2'=>'some nike text'),
                array( 'logo'=>'images/nike.png', 'description3'=>'some nike text')),
"puma" = array(
                array( 'logo'=>'images/puma.png', 'description'=>'some puma text'),
                array( 'logo'=>'images/puma.png', 'description'=>'some puma text'),
                array( 'logo'=>'images/puma.png', 'description'=>'some puma text')),
"addidas" = array(
                array( 'logo'=>'images/addidas.png', 'description'=>'some addidas text'),
                array( 'logo'=>'images/addidas.png', 'description'=>'some addidas text'),
                array( 'logo'=>'images/addidas.png', 'description'=>'some addidas text')),
"Asics" = array(
                array( 'logo'=>'images/Asics.png', 'description'=>'some Asics text'),
                array( 'logo'=>'images/Asics.png', 'description'=>'some Asics text'),
                array( 'logo'=>'images/Asics.png', 'description'=>'some Asics text')),
"Qicksilver" = array(
                array( 'logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text'),
                array( 'logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text'),
                array( 'logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text')),
);
?>

The goal is to display the brand names ie Puma, Nike etc as hyperlinks in a div:

<div id="brand-nav">

</div>

Then when you click on one of the hyperlinks, it will load the content within the arrays. For example when you click on the Nike link, it will load the 3 array items into a div below:

<div id="brand-content">

</div>

I understand that to achieve this effect, I would be better using Javascript so that I don’t navigate away from the current page, and avoid page refreshes etc. So I believe that it would be easier to convert my php array as a JSON object.

<script type="text/javascript">
var brand = <?php echo json_encode($brand) ?>;
</script>

So now the array is a JSON object, I need to iterate over it to display just the brand names as hyperlinks.

for (var n in brand){
for (var i in brand[n]){
     document.write('<a href="' + brand[n][i].logo + '">' + brand[n][i].description + '</a>');
    }
}

With this code it is just dumping all the array items for every brand.

So essentially I would like to display all the brands names as hyperlinks within the brand-nav div and onClick, load all related array items for that brand.

Hope someone can help.

Volterony

2

I have had a play about and had some help and manged to get part of my issue solved:

<?php
$brand = array (
"nike" => array (
                array('logo'=>'images/nike.png', 'description' =>'some nike text'),
                array('logo'=>'images/nike.png', 'description' =>'some nike text'),
                array('logo'=>'images/nike.png', 'description' =>'some nike text')),
"puma" => array(
                array('logo'=>'images/puma.png', 'description' =>'some puma text'),
                array('logo'=>'images/puma.png', 'description' =>'some puma text'),
                array('logo'=>'images/puma.png', 'description' =>'some puma text')),
"addidas" => array(
                array('logo'=>'images/addidas.png', 'description'=>'some addidas text1'),
                array('logo'=>'images/addidas.png', 'description'=>'some addidas text2'),
                array('logo'=>'images/addidas.png', 'description'=>'some addidas text3')),
"Asics" => array(
                array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
                array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
                array('logo'=>'images/Asics.png', 'description'=>'some Asics text')),
"Qicksilver" => array(
                array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text'),
                array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text'),
                array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text')),
);
?>

<style type="text/css">
a {
margin-left:10px;
}
#brand-content {
margin-top:50px;
border:solid 1px #000;
padding:10px;
display:none;
width: 50%;
}
#brand-content img {
margin-right:25px;
}


</style>

<script>

var brand = <?php echo json_encode($brand) ?>; // json_encode($brand) is equivalent to the following: {"nike":[{"logo":"images\\/nike.png","description":"some nike text"},{"logo":"images\\/nike.png","description":"some nike text"},{"logo":"images\\/nike.png","description":"some nike text"}],"puma":[{"logo":"images\\/puma.png","description":"some puma text"},{"logo":"images\\/puma.png","description":"some puma text"},{"logo":"images\\/puma.png","description":"some puma text"}],"addidas":[{"logo":"images\\/addidas.png","description":"some addidas text"},{"logo":"images\\/addidas.png","description":"some addidas text"},{"logo":"images\\/addidas.png","description":"some addidas text"}],"Asics":[{"logo":"images\\/Asics.png","description":"some Asics text"},{"logo":"images\\/Asics.png","description":"some Asics text"},{"logo":"images\\/Asics.png","description":"some Asics text"}],"Qicksilver":[{"logo":"images\\/Qicksilver.png","description":"some Qicksilver text"},{"logo":"images\\/Qicksilver.png","description":"some Qicksilver text"},{"logo":"images\\/Qicksilver.png","description":"some Qicksilver text"}]}

function readyLinks()
{
 for (var n in brand){
  for (var i in brand[n]){
   var link = document.createElement("a");
   link.href = brand[n][i].logo;
   link.innerHTML = n;
   link.setAttribute("data-description",brand[n][i].description);
   link.onclick = function(){
    document.getElementById("brand-content").innerHTML = "<img src=\\""+this.href+"\\"/>" + this.getAttribute("data-description");
    document.getElementById("brand-content").style.display = "block";
    return false;
   }
  }
  document.getElementById("brand-nav").appendChild(link);
 }
}

window.onload = function() {
 readyLinks();
}

</script>

<!-- body -->

<div id="brand-nav"></div>

<div id="brand-content"></div>

However It only seem seems to be loading 1 item from the array into the brand-content div. So for example if I click on the Nike div, it only loads item 3 and items 1 and 2 are missing?

Any ideas?

Volterony

3

It might be easier to load all the content first then use click events to show / hide the appropriate content.

For example:


foreach( $brand as $key => $item ) {
    <div class="<?php echo $key ?>">
         <a href="" class="js-toggle" data-area="<?php echo $key; ?>-area"><?php echo $key; ?></a>
         <div class="js-<?php echo $key; ?>-area">
                 //Loop through again and display everything from inside the array
         </div>
    </div>
}

Now you need to set up the click event.



$( '.js-toggle' ).click( function( e ) {

    var target = e.target;

    $( '.js-' + $( target ).attr( 'data-area' ) + '-area' ).slideToggle( 'fast' );

     e.preventDefault();
});

I havent testing this properly but an approach like this would work.