Vue

• Vue

Congress

JSON Data:

{"people":[
{},{},
{
    "id": {
        "bioguide": "L000287",
        "thomas": "00688",
        "govtrack": 400240,
        "opensecrets": "N00002577",
        "votesmart": 26820,
        "icpsr": 15431,
        "fec": ["H6GA05217"],
        "cspan": 2528,
        "wikipedia": "John Lewis (civil rights leader)",
        "house_history": 16948,
        "ballotpedia": "John Lewis (Georgia)",
        "maplight": 341,
        "wikidata": "Q45380",
        "google_entity_id": "kg:/m/02555z"
    },
    "name": {
        "first": "John",
        "middle": "R.",
        "last": "Lewis",
        "official_full": "John Lewis"
    },
    "bio": {
        "birthday": "1940-02-21",
        "gender": "M"
    },
    "current_term": {
        "type": "rep",
        "start": "2019-01-03",
        "end": "2021-01-03",
        "state": "GA",
        "district": 5,
        "party": "Democrat",
        "phone": "202-225-3801",
        "address": "300 Cannon House Office Building; Washington DC 20515-1005",
        "office": "300 Cannon House Office Building",
        "url": "https://johnlewis.house.gov",
        "rss_url": "http://johnlewis.house.gov/rss.xml"
    },
    "photos": {
        "original": "https://theunitedstates.io/images/congress/original/L000287.jpg",
        "medium": "https://theunitedstates.io/images/congress/450x550/L000287.jpg",
        "small": "https://theunitedstates.io/images/congress/225x275/L000287.jpg"
    }
},
{},{},{}

]}

Template

<h2>Current Legislators</h2>
 <ul>
 <li v-for="p in people">
     <img v-bind:src="p.photos.small"/>
     <p>
     {{p.name.official_full}}<br/>
     {{p.current_term.state}}<br/>
     {{p.current_term.type}}<br/>
     {{p.current_term.party}}
     </p>
</li>
</ul>