Having some problems with Using certain data from API calls
Hi i've been struggling for a while now trying to grasp how to use the data received in an api call. A lot of tutorials are either outdated or focus solely on creating API's rather than using them. I understand the concepts behind hashes and arrays but im really having a problem looping through a hash eg
{
"url"=>"http://omgili.com/ri/.wHSUbtEfZTzBH6c9Z4cI15_sA3HthoyBsw5ReJGw0_rbFKKFEKXBJwvDa3kZF3xDSXTHCr8lp7XkztyRGcZF5Nj8PkbgQlU3r3ShvgEY_1f_sBkxDhbCkGvb.Y6Rf2W",
"uuid"=>"9b002800be28f622fb9895ea5850b1dc2390d6bf",
"source"=>{
"site_full"=>"www.walmart.com",
"site"=>"walmart.com",
"site_section"=>"https://www.walmart.com/",
"section_title"=>"Walmart.com: Free 2-Day Shipping on Millions of Items",
"country"=>"US"
},
"name"=>"Beginning JavaScript Charts: With JqPlot, D3, and Highcharts",
"description"=>"BeginningJavaScript Charts shows how to convert your data into eye-catching, innovative, animated, and highly interactive browser-based charts. This book is suitable for developers of all experience levels and needs: for those who love fast and effective solutions, you can use the jqPlot library to generate charts with amazing effects and animations using only a few lines of code; if you want more power and need to create data visualization beyond traditional charts, then D3 is the JavaScript library for you; finally, if you need a high-performance, professional solution for interactive charts, then the Highcharts library is also covered. If you are an experienced developer and want to take things further, thenBeginningJavaScript Charts also shows you how to develop your own graphics library starting from scratch using jQuery. At the end ofthe book, you will have a good knowledge of all the elements needed to manage data from every possible source, from high-end scientific instruments to Arduino boards, from PHP SQL databases queries to simple HTML tables, and fromMatlabcalculations to reports in Excel. You will be able to provide cutting-edge charts exploiting the growing power of modern browsers. Create all kinds of charts using the latest technologies available on browsers (HTML5, CSS3, jQuery, jqPlot, D3, Highcharts, and SVG) Full ofstep-by-stepexamples, BeginningJavaScript Charts introduces you gradually to all aspects of chart development, from the data source to the choice of which solution to apply. This book provides a number of tools that can be the starting point for any project requiring graphical representations of data, whether using commercial libraries or your own What you'll learn Learn the jqPlot, D3, Highcharts, CSS, jQuery and SVG basics. Discover the world of JavaScript graphic libraries. Discover which charts can best represent your data. Switch from a vision of a chart sent from a server as a static image to a highly dynamic one, in which the user is able to interact in real time. Perform input data manipulation to increase chart readability. Develop your own graphic library. Who this book is for BeginningJavaScript Charts is for developers at all levels interested in data visualization, and ready to embrace modern web standards and animate and display their data with powerful, cutting-edge technologies.",
"brand"=>"",
"price"=>62.74,
"currency"=>"$",
"offer_price"=>nil,
"model"=>nil,
"manufacturer"=>nil,
"in_stock"=>true,
"on_sale"=>nil,
"product_id"=>"28432749",
"sku"=>nil,
"mpn"=>nil,
"colors"=>[],
"aggregated_rating"=>nil,
"best_rating"=>nil,
"worst_rating"=>nil,
"rating_count"=>nil,
"reviews_count"=>nil,
"categories"=>[
"books",
"home page",
"baby",
"nonfiction",
"computers & technology",
"programming languages",
"javascript"
],
"width"=>nil,
"height"=>nil,
"weight"=>nil,
"depth"=>nil,
"images"=>[
"https://i5.walmartimages.com/asr/106571c2-832b-4247-8557-54ebe93c9a96_1.45a720c109d0e56be9ce583e79b64933.jpeg"
],
"language"=>"english",
"last_changed"=>"2017-11-12T12:26:19.004+02:00",
"crawled"=>"2017-11-12T12:26:19.004+02:00",
"product_history"=>"/productHistory?&productId=http%3A%2F%2Fomgili.com%2Fri%2F.wHSUbtEfZTzBH6c9Z4cI15_sA3HthoyBsw5ReJGw0_rbFKKFEKXBJwvDa3kZF3xDSXTHCr8lp7XkztyRGcZF5Nj8PkbgQlU3r3ShvgEY_1f_sBkxDhbCkGvb.Y6Rf2W"
},
I've finally mastered creating the API logic then calling this logic in the controller and finally displaying to html but all i am able to figure out is @(NAMEOFFUNC)['(each API Returns a unique attribute)'] or @output['products'] will print out the entire value of the "products" key. (Should mention i dont know why it returns a hashed array and not a simple array or objects. i think its because of ruby being used in the back end so if a JSON data structure is called it auto returns a ruby hash, i know in the call logic i set the format to :JSON could have been xml) Then im able to individually use something like this @output['products'][0]['name'] or @(NAMEOFFUNCTION)['UNIQUATR'][(id. of the product)]['(NAMEOFKEY)'] and sure enough this takes the key Name and prints its value. Images however dont work. <%= image_tag (@output['products'][0]['images']) %> returns nill this i know is because of the layout of the hashed array. ruby thinks the actual link of the image is a key that should have a value but its actually a value or object.
************ How could i get the image to display properly. ?
************ Also how could i loop through all the products displaying there value?
The looping part i understand that the loop only needs to have this contained inside it. and should have a erb to start and erb to end
<% @output.each do |out| %>
<!--Start a loop here-->
<div class="tile scale-anm arduinoBD">
<div id="listImage">
<%= image_tag out['images'], size: '150'%>
<div class="content-overlay"></div>
<div class="content-details fadeIn-left">
<h3> <%= out['name'] %> </h3>
<p> <%= out['description'] %></p>
<p> <%= out['price']%> </p>
</div>
</div>
</div>
<!--finish the loop here-->
<% end %>
{
"url"=>"http://omgili.com/ri/.wHSUbtEfZTzBH6c9Z4cI15_sA3HthoyBsw5ReJGw0_rbFKKFEKXBJwvDa3kZF3xDSXTHCr8lp7XkztyRGcZF5Nj8PkbgQlU3r3ShvgEY_1f_sBkxDhbCkGvb.Y6Rf2W",
"uuid"=>"9b002800be28f622fb9895ea5850b1dc2390d6bf",
"source"=>{
"site_full"=>"www.walmart.com",
"site"=>"walmart.com",
"site_section"=>"https://www.walmart.com/",
"section_title"=>"Walmart.com: Free 2-Day Shipping on Millions of Items",
"country"=>"US"
},
"name"=>"Beginning JavaScript Charts: With JqPlot, D3, and Highcharts",
"description"=>"BeginningJavaScript Charts shows how to convert your data into eye-catching, innovative, animated, and highly interactive browser-based charts. This book is suitable for developers of all experience levels and needs: for those who love fast and effective solutions, you can use the jqPlot library to generate charts with amazing effects and animations using only a few lines of code; if you want more power and need to create data visualization beyond traditional charts, then D3 is the JavaScript library for you; finally, if you need a high-performance, professional solution for interactive charts, then the Highcharts library is also covered. If you are an experienced developer and want to take things further, thenBeginningJavaScript Charts also shows you how to develop your own graphics library starting from scratch using jQuery. At the end ofthe book, you will have a good knowledge of all the elements needed to manage data from every possible source, from high-end scientific instruments to Arduino boards, from PHP SQL databases queries to simple HTML tables, and fromMatlabcalculations to reports in Excel. You will be able to provide cutting-edge charts exploiting the growing power of modern browsers. Create all kinds of charts using the latest technologies available on browsers (HTML5, CSS3, jQuery, jqPlot, D3, Highcharts, and SVG) Full ofstep-by-stepexamples, BeginningJavaScript Charts introduces you gradually to all aspects of chart development, from the data source to the choice of which solution to apply. This book provides a number of tools that can be the starting point for any project requiring graphical representations of data, whether using commercial libraries or your own What you'll learn Learn the jqPlot, D3, Highcharts, CSS, jQuery and SVG basics. Discover the world of JavaScript graphic libraries. Discover which charts can best represent your data. Switch from a vision of a chart sent from a server as a static image to a highly dynamic one, in which the user is able to interact in real time. Perform input data manipulation to increase chart readability. Develop your own graphic library. Who this book is for BeginningJavaScript Charts is for developers at all levels interested in data visualization, and ready to embrace modern web standards and animate and display their data with powerful, cutting-edge technologies.",
"brand"=>"",
"price"=>62.74,
"currency"=>"$",
"offer_price"=>nil,
"model"=>nil,
"manufacturer"=>nil,
"in_stock"=>true,
"on_sale"=>nil,
"product_id"=>"28432749",
"sku"=>nil,
"mpn"=>nil,
"colors"=>[],
"aggregated_rating"=>nil,
"best_rating"=>nil,
"worst_rating"=>nil,
"rating_count"=>nil,
"reviews_count"=>nil,
"categories"=>[
"books",
"home page",
"baby",
"nonfiction",
"computers & technology",
"programming languages",
"javascript"
],
"width"=>nil,
"height"=>nil,
"weight"=>nil,
"depth"=>nil,
"images"=>[
"https://i5.walmartimages.com/asr/106571c2-832b-4247-8557-54ebe93c9a96_1.45a720c109d0e56be9ce583e79b64933.jpeg"
],
"language"=>"english",
"last_changed"=>"2017-11-12T12:26:19.004+02:00",
"crawled"=>"2017-11-12T12:26:19.004+02:00",
"product_history"=>"/productHistory?&productId=http%3A%2F%2Fomgili.com%2Fri%2F.wHSUbtEfZTzBH6c9Z4cI15_sA3HthoyBsw5ReJGw0_rbFKKFEKXBJwvDa3kZF3xDSXTHCr8lp7XkztyRGcZF5Nj8PkbgQlU3r3ShvgEY_1f_sBkxDhbCkGvb.Y6Rf2W"
},
I've finally mastered creating the API logic then calling this logic in the controller and finally displaying to html but all i am able to figure out is @(NAMEOFFUNC)['(each API Returns a unique attribute)'] or @output['products'] will print out the entire value of the "products" key. (Should mention i dont know why it returns a hashed array and not a simple array or objects. i think its because of ruby being used in the back end so if a JSON data structure is called it auto returns a ruby hash, i know in the call logic i set the format to :JSON could have been xml) Then im able to individually use something like this @output['products'][0]['name'] or @(NAMEOFFUNCTION)['UNIQUATR'][(id. of the product)]['(NAMEOFKEY)'] and sure enough this takes the key Name and prints its value. Images however dont work. <%= image_tag (@output['products'][0]['images']) %> returns nill this i know is because of the layout of the hashed array. ruby thinks the actual link of the image is a key that should have a value but its actually a value or object.
************ How could i get the image to display properly. ?
************ Also how could i loop through all the products displaying there value?
The looping part i understand that the loop only needs to have this contained inside it. and should have a erb to start and erb to end
<% @output.each do |out| %>
<!--Start a loop here-->
<div class="tile scale-anm arduinoBD">
<div id="listImage">
<%= image_tag out['images'], size: '150'%>
<div class="content-overlay"></div>
<div class="content-details fadeIn-left">
<h3> <%= out['name'] %> </h3>
<p> <%= out['description'] %></p>
<p> <%= out['price']%> </p>
</div>
</div>
</div>
<!--finish the loop here-->
<% end %>
I manged to solve the image problem all i had to do was add .first to the end of @output['products'[0]['images'].first like so