Array data to nested HTML

Question

I'm having trouble converting an array into correctly nested HTML. Assuming I have an array with the following example values -

An, Author---Some Book
Another, Author---A Book
Another, Author---Another Book
Be, Author---Book 1
Be, Author---Book 2
No, Author---Book 1

How do turn that into an organised HTML like -

<div>
    <div class="letter">A</div>
    <div>
        <div class="author">An, Author</div>
        <div class="title">Some Book</div>
    </div>
    <div>
        <div class="author">Another, Author</div>
        <div class="title">A Book</div>
        <div class="title">Another Book</div>
    </div>
<div>
<div>
    <div class="letter">B</div>
    <div>
        <div class="author">Be, Author</div>
        <div class="title">Book 1</div>
        <div class="title">Book 2</div>
    </div>
<div>
<div>
    <div class="letter">N</div>
    <div>
        <div class="author">No, Author</div>
        <div class="title">Book 1</div>
    </div>
<div>

I don't have any trouble with PHP, its just I'm not sure how I would organise the data. Split into three different arrays (Letters, Authors, Books) before pulling the data back together? But then how would I associate the books (Letter->Author->Book)?

Thanks for any ideas.

First you need to go through some tutorial How to traverse an array php — Shakti Singh
– Shakti Singh, Commented Feb 8, 2011 at 5:27
Can you print_r your array? do you need someone to write a function for you that will split each line, sort it into letters and then output it as shown? — Jason
– Jason, Commented Feb 8, 2011 at 5:30
I know how to traverse an array using and how to explode a string. I don't have a problem with PHP. I'm just having trouble getting everything correctly nested. I think I have to move to a different data structure, I'm just not sure what that would look like. — usertest
– usertest, Commented Feb 8, 2011 at 5:36
Post code describing us the format of the array(s), we'll go from there. — zanlok
– zanlok, Commented Feb 8, 2011 at 5:55
The format of the array is just as above - A single dimensional array with several strings just as they look above. — usertest
– usertest, Commented Feb 8, 2011 at 6:08

Dan Grossman · Accepted Answer · 2011-02-08 07:26:53Z

Assuming your array is already sorted as the example:

for ($i = 0; $i < count($array); $i++) {
    $parts = explode("---", $array[$i]);
    $author = $parts[0];
    $book = $parts[1];
    $letter = substr($author, 0, 1);

    if (!isset($last_author) || $last_author != $author) {

        if ($i > 0 && $last_letter != $letter) {
                echo "\t</div>\n";
                echo "</div>\n";
        } else if ($i > 0) {
                echo "\t</div>\n";
        }

        if (!isset($last_letter) || $last_letter != $letter) {
            echo "<div>\n";
            echo "\t" . '<div class="letter">' . strtoupper($letter) . '</div>' . "\n";
            $last_letter = $letter;
        }

        echo "\t<div>\n";

        echo "\t\t" . '<div class="author">' . $author . '</div>' . "\n";
        echo "\t\t" . '<div class="title">' . $book . '</div>' . "\n";

        $last_author = $author;

    } else {
        echo "\t\t" . '<div class="title">' . $book . '</div>' . "\n";
    }

}

if (count($array) > 0) echo "\t</div>\n</div>";

Output from your sample array:

<div>
        <div class="letter">A</div>
        <div>
                <div class="author">An, Author</div>
                <div class="title">Some Book</div>
        </div>
        <div>
                <div class="author">Another, Author</div>
                <div class="title">A Book</div>
                <div class="title">Another Book</div>
        </div>
</div>
<div>
        <div class="letter">B</div>
        <div>
                <div class="author">Be, Author</div>
                <div class="title">Book 1</div>
                <div class="title">Book 2</div>
        </div>
</div>
<div>
        <div class="letter">N</div>
        <div>
                <div class="author">No, Author</div>
                <div class="title">Book 1</div>
        </div>
</div>

Thanks, thats similar to something I tried before. The problem with it is that it doesn't work with multiple authors with the same first letter. The the second author that begins with 'A' isn't nested with the first with your code, its nested on its own.

Dan Grossman · Accepted Answer · 2011-02-08 07:37:01Z

0

You can also produce a multidimensional array which may require less code to render:

$new = array();

for ($i = 0; $i < count($array); $i++) {
    $parts = explode("---", $array[$i]);
    $author = $parts[0];
    $book = $parts[1];
    $letter = substr($author, 0, 1);

    $new[$letter][$author][] = $book;
}

foreach ($new as $letter => $authors) {

    foreach ($authors as $author => $books) {

        foreach ($books as $book) {

        }

    }

}

answered Feb 8, 2011 at 7:37

Dan Grossman

52.5k10 gold badges115 silver badges101 bronze badges

Comments

Chris Cox · Accepted Answer · 2011-02-08 10:25:41Z

0

You've got div soup there, however you parse your arrays.

Try outputting something meaningful and semantic using lists.

answered Feb 8, 2011 at 10:25

Chris Cox

6313 silver badges17 bronze badges

Collectives™ on Stack Overflow

Array data to nested HTML

3 Answers 3

1 Comment

Comments

Comments

Your Answer

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

Related