How To Get Php Array And Put It In Html List?

Discussion in 'JavaScript' started by gab0natchi, Jan 30, 2013.

  1. #1
    I'm new to programming. I apologize if this question is a little bit dumb to some of you. I need help on how to get PHP array and put it in html list? I want to manipulate php array in html as easy as possible without using much of php code.

    For example, if I have this result from php echo:
    <img src="image01.jpg">
    <img src="image02.jpg">
    <img src="image03.jpg">
    <img src="image04.jpg">
    <img src="image05.jpg">

    I want it to put this way in html
    <li><<img src="image01.jpg"></li>
    <li><<img src="image02.jpg"></li>
    <li><<img src="image03.jpg"></li>
    <li><<img src="image04.jpg"></li>
    <li><<img src="image05.jpg"></li>

    Thanks for your help in advance!
     
    Last edited: Jan 30, 2013
    gab0natchi, Jan 30, 2013 IP
  2. gab0natchi

    gab0natchi Greenhorn

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #2
    Thank you for the reply! It works. Is there a way that I can put the foreach echo into javascript variable so that it would be easy for me to manipulate it on html? It's very hard for me to put css code to format the result in html. Or whats the best way to do it? It's easier for me if I will not use php code in html. :)
     
    gab0natchi, Jan 30, 2013 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Could you be a bit more clear about what you are asking? It almost sounds like you want to change them from the scripting, in which case getElementByID the parent UL, getElementsByTagName off that UL, and pull/manipulate the SRC from there.

    But really, I'm not sure I'm following your broken engrish.
     
    deathshadow, Jan 30, 2013 IP
  4. gab0natchi

    gab0natchi Greenhorn

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    I
    I apologize if I gave you headache on my broken engrish. I'm trying my best to express what I'm trying to achieve. Like I said, I'm new to programming and still learning. I'm not familiar yet with all the programming terminology.

    I'm trying to understand what you've replied. I think you got what I mean.
    Here's the php code:

    // Display results
    echo "<div id='imgcontainer'>";
    foreach ($popular->data as $data)
    {
    echo "<img src=\"{$data->images->thumbnail->url}\">";
    if($count==2)
    {
    echo "<br />";
    }
    $count++;
    }
    echo "</div>";
    ?>
    The result looks like this:
    <div id="imgcontainer">
    <img src="http://image_01.jpg">
    <img src="http://image_02.jpg">
    <img src="http://image_03.jpg">
    <img src="http://image_04.jpg">
    </div>
    My problem is, I'm having trouble to format the "imgcontainer" due to the coding was done in php. I'm thinking if there's a javascript that can capture these results (<img src="http://image_01.jpg">,<img src="http://image_02.jpg">,<img src="http://image_03.jpg">,<img src="http://image_04.jpg">).
    Then code them in this manner in html page:
    <div class="images">
    <ul class="photos">
    <li>
    <img alt="" height="175" src="result_01" title="" width="175" />
    </li>
    <li>
    <img alt="" height="175" src="result_02" title="" width="175" />
    </li>
    </ul>
    </div>
     
    gab0natchi, Jan 31, 2013 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Ok, I'd probably lose the 'DIV around it for no reason' since UL's a perfectly good block level container :D -- but what you're asking for is pretty simple... PHP side... what tubeAce suggested is pretty much what you should do.

    Changing it client side, which seems to be what you are asking, is just bad... Doing that from the javascript is... sloppy, wasteful... just bad practice... as a rule of thumb screwing with poorly written markup or markup you don't want with javascript is just throwing good code after bad. Basically I would never do what you are asking - changing the markup client side. ESPECIALLY given how badly it can fall apart when someone like me is browsing with scripting blocked.

    Best rule -- scripting should enhance, not supplant/replace existing markup.
     
    deathshadow, Jan 31, 2013 IP
  6. gab0natchi

    gab0natchi Greenhorn

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6

    Oh... Okay. Thank you so much for your help!
     
    gab0natchi, Jan 31, 2013 IP
  7. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #7
    What no one's explained to you, and what you don't seem to understand, is that PHP, Javascript and HTML aren't just different languages you can use where and how you choose. PHP runs on the server, creating HTML and Javascript, then sends it to the user. You can create the entire HTML page, including Javascript and CSS, in PHP, but once HTML is rendering and Javascript is executing, PHP is no more - the code is in the user's browser, and PHP stops running before anything is sent to the browser. HTML and Javascript can't "manipulate" PHP (not directly - there's a way to communicate back and forth between the server and the browser) - so think of it in two stages - do what PHP does, including creation of the entire page, then stop thinking PHP.
     
    Rukbat, Feb 4, 2013 IP