JavaScript: extracting information from a PHP script

Question

The issue I'm having is I'm unsure of the correct code in order to begin extracting from the PHP script I parsed in the earlier function. Firstly here is the code

function getExibitions()
{
myExhibitionsView = document.getElementById('exhibitioncontent');
option = document.createElement('ul');

 for (var i = 0; i < json.length; i++) {
      option.id = 'exhibitionsAll';
       listCheck = document.createElement('src');
       listCheck.id = "<img src = " + "./images/" + json.exhibits[i].exhibit_image;
      myExhibitionsView.appendChild(option);
      option.appendChild(listCheck);   
       //= json.states[i].image;  
      }

}

The issue I believe is there must be something after the json.something.length as a means of traversing the data.

Here is the PHP script:

<?php
    $exhibitionsarray = array(
            array("exhibition_id" => "1", "exhibition_title" => "New York, New York", "exhibition_subject" => "New York", "ticket_price" => "10",
                "exhibits" => array(
                    array("exhibit_id" => "3", "exhibit_title" => "Brooklyn Bridge from City Hall Park", "exhibit_description" => "New York, June 2005", "exhibit_image" => "brooklynbridge.jpg", "photographer" => "MLG"),
                    array("exhibit_id" => "6", "exhibit_title" => "Central Park, New York", "exhibit_description" => "New York, June 2005", "exhibit_image" => "centralpark.jpg", "photographer" => "MLG"),
                    array("exhibit_id" => "7", "exhibit_title" => "Chrysler Building at night, New York", "exhibit_description" => "New York, July 2001", "exhibit_image" => "chrysler_building.jpg", "photographer" => "MLG")
                ),
                "locations" => array(
                    array("location_id" => "1", "location_name" => "Kelvingrove Art Gallery and Museum", "location_postcode" => "G3 8AG"),
                    array("location_id" => "3", "location_name" => "Walker Art Gallery", "location_postcode" => "L3 8EL"),
                    array("location_id" => "5", "location_name" => "Tate Modern", "location_postcode" => "SE1 9TG")
                )
            ),
            array("exhibition_id" => "2", "exhibition_title" => "Spanish Cities", "exhibition_subject" => "Spain", "ticket_price" => "15",
                "exhibits" => array(
                    array("exhibit_id" => "9", "exhibit_title" => "Eiffel Bridge, Girona", "exhibit_description" => "Girona, March 2008", "exhibit_image" => "eiffel_bridge.jpg", "photographer" => "LPK"),
                    array("exhibit_id" => "13", "exhibit_title" => "Plaza Mayor, Madrid", "exhibit_description" => "Madrid, June 2010", "exhibit_image" => "plazamayor.jpg", "photographer" => "MLG"),
                    array("exhibit_id" => "14", "exhibit_title" => "Puppy (Day)", "exhibit_description" => "Bilbao, September 2006 - Puppy in daylight", "exhibit_image" => "puppy_day.jpg", "photographer" => "LPK"),
                    array("exhibit_id" => "15", "exhibit_title" => "Puppy (Night)", "exhibit_description" => "Bilbao, March 2011 - Puppy at night", "exhibit_image" => "puppy_night.jpg", "photographer" => "LPK")                                                                      
                ),
                "locations" => array(
                    array("location_id" => "2", "location_name" => "Scottish National Gallery", "location_postcode" => "EH2 2EL")
                )                                               
            ),
            array("exhibition_id" => "3", "exhibition_title" => "A Glasgow Viewpoint", "exhibition_subject" => "Glasgow", "ticket_price" => "5",
                "exhibits" => array(
                    array("exhibit_id" => "2", "exhibit_title" => "Bothwell Castle", "exhibit_description" => "Bothwell, April 2011", "exhibit_image" => "bothwell_castle.jpg", "photographer" => "LPK"),
                    array("exhibit_id" => "10", "exhibit_title" => "Hampden Park", "exhibit_description" => "Glasgow, June 2007 - SQA Event", "exhibit_image" => "hampden.jpg", "photographer" => "MLG"),
                    array("exhibit_id" => "11", "exhibit_title" => "Hogganfield Loch, Glasgow, Winter", "exhibit_description" => "Glasgow, January 2010", "exhibit_image" => "hogganfield_loch.jpg", "photographer" => "MLG"),
                    array("exhibit_id" => "16", "exhibit_title" => "Ramblas", "exhibit_description" => "Barcelona, July 1999 - Ramblas (Two Old Friends from Glasgow)", "exhibit_image" => "ramblas.jpg", "photographer" => "MLG"),
                    array("exhibit_id" => "17", "exhibit_title" => "River Clyde at Bothwell", "exhibit_description" => "Bothwell, April 2011 - River Clyde from Bothwell", "exhibit_image" => "river_clyde.jpg", "photographer" => "LPK"),
                    array("exhibit_id" => "18", "exhibit_title" => "River Kelvin", "exhibit_description" => "Glasgow, July 2011", "exhibit_image" => "river_kelvin.jpg", "photographer" => "MLG"),
                    array("exhibit_id" => "21", "exhibit_title" => "University Avenue", "exhibit_description" => "Glasgow, July 2011", "exhibit_image" => "university_avenue.jpg", "photographer" => "LPK")                                                                     
                ),
                "locations" => array(
                    array("location_id" => "1", "location_name" => "Kelvingrove Art Gallery and Museum", "location_postcode" => "G3 8AG"),
                    array("location_id" => "2", "location_name" => "Scottish National Gallery", "location_postcode" => "EH2 2EL"),
                    array("location_id" => "3", "location_name" => "Walker Art Gallery", "location_postcode" => "L3 8EL"),
                    array("location_id" => "4", "location_name" => "The Lowry", "location_postcode" => "M50 3AZ"),
                    array("location_id" => "5", "location_name" => "Tate Modern", "location_postcode" => "SE1 9TG")
                )                                                   
            ),
            array("exhibition_id" => "4", "exhibition_title" => "Some Churches", "exhibition_subject" => "Religious Architecture", "ticket_price" => "5",
                "exhibits" => array(
                    array("exhibit_id" => "1", "exhibit_title" => "Big Ben", "exhibit_description" => "London, September 2011", "exhibit_image" => "big_ben.jpg", "photographer" => "LPK"),
                    array("exhibit_id" => "12", "exhibit_title" => "Louvre, Paris", "exhibit_description" => "Paris, June 1998", "exhibit_image" => "louvre.jpg", "photographer" => "LPK"),
                    array("exhibit_id" => "19", "exhibit_title" => "Sagrada Familia - Honeymoon", "exhibit_description" => "Barcelona, June 1997 - Honeymoon", "exhibit_image" => "sagrada.jpg", "photographer" => "MLG"),
                    array("exhibit_id" => "20", "exhibit_title" => "Mormon Temple", "exhibit_description" => "Salt Lake City, July 2005", "exhibit_image" => "salt_lake.jpg", "photographer" => "MLG")                                                                      
                ),
                "locations" => array(
                    array("location_id" => "1", "location_name" => "Kelvingrove Art Gallery and Museum", "location_postcode" => "G3 8AG"),
                    array("location_id" => "2", "location_name" => "Scottish National Gallery", "location_postcode" => "EH2 2EL")
                )                                                   
            ),
            array("exhibition_id" => "5", "exhibition_title" => "Barcelona Highlights", "exhibition_subject" => "Barcelona", "ticket_price" => "15",
                "exhibits" => array(
                    array("exhibit_id" => "4", "exhibit_title" => "Martin at Camp Nou, Honeymoon", "exhibit_description" => "Barcelona, June 1997 - Honeymoon", "exhibit_image" => "campnou.jpg", "photographer" => "LPK"),
                    array("exhibit_id" => "5", "exhibit_title" => "Placa de Catalunya, Barcelona - Honeymoon", "exhibit_description" => "Barcelona, June 1997 - Honeymoon", "exhibit_image" => "catalunya.jpg", "photographer" => "MLG")
                ),
                "locations" => array(
                    array("location_id" => "3", "location_name" => "Walker Art Gallery", "location_postcode" => "L3 8EL"),
                    array("location_id" => "4", "location_name" => "The Lowry", "location_postcode" => "M50 3AZ"),
                    array("location_id" => "5", "location_name" => "Tate Modern", "location_postcode" => "SE1 9TG")
                )                                                   
            ),
            array("exhibition_id" => "6", "exhibition_title" => "Martin’s Pictures", "exhibition_subject" => "Martin", "ticket_price" => "5",
                "exhibits" => array(
                    array("exhibit_id" => "8", "exhibit_title" => "David Crosby at David Gilmour gig", "exhibit_description" => "Glasgow, May 2006", "exhibit_image" => "davidcrosby.jpg", "photographer" => "MLG"),
                    array("exhibit_id" => "22", "exhibit_title" => "Wolves", "exhibit_description" => "Yellowstone Park, October 2004", "exhibit_image" => "wolves.jpg", "photographer" => "MLG")
                ),
                "locations" => array(
                    array("location_id" => "1", "location_name" => "Kelvingrove Art Gallery and Museum", "location_postcode" => "G3 8AG"),
                    array("location_id" => "3", "location_name" => "Walker Art Gallery", "location_postcode" => "L3 8EL"),
                    array("location_id" => "4", "location_name" => "The Lowry", "location_postcode" => "M50 3AZ"),
                    array("location_id" => "5", "location_name" => "Tate Modern", "location_postcode" => "SE1 9TG")
                )
            )               
    );
    echo json_encode($exhibitionsarray);
?>

I was sure that json.exhibits.length would do the trick but this leads to several errors such as json and length both being undefined so I know my error is here. I have done a similar piece of code and followed the same fixes with no success.

EDIT: json parse

function jsonAll()
{
    console.log("in function!");
    url = "exhibitions.php";
    xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log("the connection is complete");
        json = JSON.parse(xmlhttp.responseText);
        console.log(json);
        getExibitions();
}
    }

    xmlhttp.open("GET", url, true);
xmlhttp.send();
}

Right but then that "json" doesn't get passed or parsed anywhere, just logged to the console. "json" is not some kind of JS global, you have to explicitly send the data somewhere. — Raydot
– Raydot, Commented Jun 3, 2015 at 19:49
at the top i have put var json. This is to avoid this problem you speak of. I just did a console.log from the function and did log the json correctly — user3071845
– user3071845, Commented Jun 3, 2015 at 19:51
you could just pass in json to your getExibitions function: like getExibitions(json) to both where you call it and where you define it instead of using a global variable. — Gisheri
– Gisheri, Commented Jun 3, 2015 at 19:54

AlliterativeAlice · Accepted Answer · 2015-06-03 19:55:43Z

1

If you're trying to get all the exhibits, you need two loops:

for (var i = 0; i < json.length; i++) {
    for (var j = 0; j < json[i].exhibits.length; j++) {
        listCheck = document.createElement('src');
        listCheck.id = "<img src = " + "./images/" + json[i].exhibits[j].exhibit_image;
        myExhibitionsView.appendChild(option);
        option.appendChild(listCheck);
    }
}

answered Jun 3, 2015 at 19:55

AlliterativeAlice

12.7k9 gold badges56 silver badges73 bronze badges

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

1 Comment

user3071845 Over a year ago

brilliant answer. Thank you very much. i believe my confusion was i previous dealt with only one array

robert · Accepted Answer · 2015-06-03 19:56:23Z

0

Your question is a little hard to understand, but I think the problem is that you aren't iterating through the JSON data correctly.

var exhibition = json[i]; var exhibit = json[i].exhibits[j];

Thus you may need a second for loop

answered Jun 3, 2015 at 19:56

robert

1,5721 gold badge17 silver badges22 bronze badges

Collectives™ on Stack Overflow

JavaScript: extracting information from a PHP script

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related