Lab 8: Charts and SwiftyJSON
Due 4/19/21 at 11:59 pm PST, submit here
Getting Started
Download the starter code here
In this lab we’ll be using the Alamofire, SwiftyJSON, and ChartView libraries. Feel free to read through the documentation to see what cool features they offer.
Please read through the starter code and comments to gain a quick understanding of what we’ll do during this lab.
Set Up Libraries
Open the Podfile and include the proper messages for Alamofire and SwiftyJSON (read their documentations or watch lecture). Navigate to the lab8 directory and run pod install.
Open the .xcworkspace file. Add the proper package dependency for ChartView (read documentation or watch lecture).
Model.swift
Let’s start by walking through the Model.swift file. On line 14, we declare enum State, as well as the @Published instance variable loaded. In the case that State is idle, our ContentView will know that we need to call requestFundingInfo to obtain the required data for our view. If the data has been loaded, we need to pass it to our view through the parameter we have declared next to case loaded on line 17.
Add two additional [(String, Double)] parameters for case loaded.
Our function requestFundingInfo() makes an API call to the Federal Election Commission to retrieve presidential campaign financial information for 2020. We make the call on line 30 and wait for a response. When the call has finished, the response JSON is automatically assigned to the variable response and the code between lines 31 and 54 is run. The response object is populated with an inner JSON for each 2020 presidential candidate. In order to get financial information for each of the top 10 presidential candidates, we need to loop over the inner JSON objects. If you’re confused about the structure of the object in json, you can use print(json) after line 32 to explore the JSON returned by the API call.
Parse subJson on line 36 to uncover "debts_owed_by_committee" as well as "cash_on_hand_end". Divide each value by 1,000,000 to create manageable numbers. Append the name of the candidate and the resulting values to debtsOwedData and cashOwedData. See line 39 for an example.
On line 47, add debtData and leftOverCash to the .loaded call.
ContentView.swift
Next, let’s walk through the ContentView.swift file to display the data we gathered using SwiftUICharts. On line 14, we switch over rq.state to check if we have requested the data we need. If not, we simply display loading text and request our data. Once rq.state switches to .loaded, we can begin to create our bar charts.
On line 22, create two additional variables to detect debtsOwedData and cashOwedData. Finally, render two BarChartViews using debtsOwedData and cashOwedData
Submission
Congratulations! You successfully decoded a JSON and displayed the contents of a public API! If you want to learn more about HTTP requests and the Alamofire library, you can do so here.
Submit the lab here by 4/19/21 at 11:59pm PST.
Lab 8: Charts and SwiftyJSON
Due 4/19/21 at 11:59 pm PST, submit here
Getting Started
Download the starter code here
In this lab we’ll be using the Alamofire, SwiftyJSON, and ChartView libraries. Feel free to read through the documentation to see what cool features they offer.
Please read through the starter code and comments to gain a quick understanding of what we’ll do during this lab.
Set Up Libraries
Open the Podfile and include the proper messages for Alamofire and SwiftyJSON (read their documentations or watch lecture). Navigate to the
lab8directory and runpod install.Open the
.xcworkspacefile. Add the proper package dependency for ChartView (read documentation or watch lecture).Model.swift
Let’s start by walking through the
Model.swiftfile. On line 14, we declareenum State, as well as the@Publishedinstance variableloaded. In the case thatStateisidle, ourContentViewwill know that we need to callrequestFundingInfoto obtain the required data for our view. If the data has been loaded, we need to pass it to our view through the parameter we have declared next tocase loadedon line 17.Add two additional
[(String, Double)]parameters forcase loaded.Our function
requestFundingInfo()makes an API call to the Federal Election Commission to retrieve presidential campaign financial information for 2020. We make the call on line 30 and wait for a response. When the call has finished, the response JSON is automatically assigned to the variableresponseand the code between lines 31 and 54 is run. The response object is populated with an inner JSON for each 2020 presidential candidate. In order to get financial information for each of the top 10 presidential candidates, we need to loop over the inner JSON objects. If you’re confused about the structure of the object injson, you can useprint(json)after line 32 to explore the JSON returned by the API call.Parse
subJsonon line 36 to uncover"debts_owed_by_committee"as well as"cash_on_hand_end". Divide each value by 1,000,000 to create manageable numbers. Append the name of the candidate and the resulting values todebtsOwedDataandcashOwedData. See line 39 for an example.On line 47, add
debtDataandleftOverCashto the.loadedcall.ContentView.swift
Next, let’s walk through the
ContentView.swiftfile to display the data we gathered usingSwiftUICharts. On line 14, weswitchoverrq.stateto check if we have requested the data we need. If not, we simply display loading text and request our data. Oncerq.stateswitches to.loaded, we can begin to create our bar charts.On line 22, create two additional variables to detect
debtsOwedDataandcashOwedData. Finally, render twoBarChartViewsusingdebtsOwedDataandcashOwedDataSubmission
Congratulations! You successfully decoded a JSON and displayed the contents of a public API! If you want to learn more about HTTP requests and the Alamofire library, you can do so here.
Submit the lab here by 4/19/21 at 11:59pm PST.