Adjust the size of the image obtained from the JSON data

I am currently working on parsing JSON data which includes an image field that I want to adjust to a specific size. Despite my many attempts at tweaking the code, I seem to have lost track of why it is not functioning as desired.

JSON

    var items=[];

$.getJSON('items.json',function(data){
    $.each(data.items, function(i, f){
        var tblRow = "<tr><td class='prod_img'><img src=" + f.image_url + "></td></tr>" + "<tr><td class='title'>" + f.title + "</td></tr>" + "<tr><td class='price'>" + f.price + "</td>" + "<td class='price_org'>" + f.old_price + "</td>" + "<td class='add_cart'><img src='img/buynow-green-5.png'>" + "</td></tr>"

        $(tblRow).appendTo("#list_items tbody");
    });
}); 

CSS

#list_items{
position:absolute;
width:100%;
border: 5px solid #B9FFFF;
margin-top:80px;}
.prod_img{
height:200px;
width:300px;}

Answer №1

After a long nap, it dawned on me what I had overlooked.

I had code for the container, but not for the actual image itself.

Every now and then, the solution is right in front of you. All it takes is a short break to see it clearly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Getting request parameters within Model in Loopback can be done by accessing the `ctx`

common/models/event.json { "name": "Event", "mongodb": { "collection": "event" }, "base": "PersistedModel", "idInjection": true, "options": { "validateUpsert": true }, "http": { "path": "organizer/:organizer_id/events" }, "properties": {}, "va ...

Click on link after animation has finished

I'm currently facing an issue with my script not functioning correctly. The code I'm utilizing is from a resource provided by Codyhouse to implement a 3D rotating navigation menu on my webpage. Essentially, when you click the hamburger icon, it o ...

Traverse through nested objects

I am currently working with JSON data containing information like uf, ivp, and others. My goal is to iterate over all the objects in order to access their properties. { "version": "1.5.0", "autor": "mindicador.cl", "fecha": "2018-10-31T13:00:00.000Z", "uf ...

Starting the animation only when the slide is visible

Struggling to add animations dynamically as a HTML/CSS developer who avoids JS but uses jQuery occasionally? Sound familiar? Well, I have. Recently, I managed to create a CSS-3 animation for the images in a Bootstrap carousel. Check out the code below: ...

retrieve the position of a descendant element in relation to its ancestor element

I'm encountering a challenge while attempting to solve this issue. I have elements representing a child, parent, and grandparent. My goal is to determine the offset position of the child (positioned absolutely) in relation to the grandparent. However, ...

Move divs that are currently not visible on the screen to a new position using CSS animations

Upon entering the site, I would like certain divs to animate from an offscreen position. I came across this code snippet: $( document ).ready(function() { $('.box-wrapper').each(function(index, element) { setTimeout(function(){ ...

Click to enlarge font size across the entire project

I'm working on a project for elderly users and my client wants a feature where they can easily adjust the font size throughout the application with just one click of a button. What is the best approach for implementing this functionality? My initial ...

What is causing the discrepancy in functionality between these two HTML/CSS files with identical code?

In this codepen, you'll find the first example: Subpar Pen: https://codepen.io/anon/pen/jGpxrp Additionally, here is the code for the second example: Excellent Pen: https://codepen.io/anon/pen/QqBmWK?editors=1100 I'm puzzled why the buttons l ...

CSS transition effect to show content: display: block

After experimenting with different styles for another element, I added padding, height, and opacity to the div. However, there seems to be no transition effect with the current CSS code. Can anyone explain why? When a button is clicked, the class .show is ...

Is it possible to create a masonry-style layout with two columns that is responsive without

Is there a way to organize multiple divs of varying heights into two columns that display immediately one after the other, without relying on JavaScript or libraries like packery or masonry? I've experimented with using display: inline-block in this ...

"Utilizing the flex box feature in IE 10 for efficient text trunc

.container { background: tomato; width: 100px; display: flex; } .text-left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-right { } <div class=container> <div class="text-left"> title title title ...

IE z-index anomaly

My line of floated divs reveals a popup when hovered over, but the popup appears under the following divs instead of on top. I've tried using z-index with no success to fix this issue. UPDATE: The problem has been resolved with some assistance, but i ...

Is it possible to convert a .gif file into a jpeg image format for mobile display on my Gatsby website?

I'm looking to convert a .gif file into a mobile.png image for my Gatsby site, but I'm struggling to find the right resources. Does anyone have suggestions on how I can achieve this? Here is the frame: https://i.sstatic.net/IjYv4.png ...

Is there a way to successfully parse this JSON without encountering any exceptions?

Below is the JSON data that I am working with: [ { "outcome": "Success", "message": "", "identity": "", "delay": "0", "symbol": "AAPL", "companyname": "Apple Inc.", "date": "Jun 08", "time": " 4:52 PM EDT", "open" ...

position the table next to the graph

I'm having trouble moving/placing items in HTML. Can we experiment with rearranging the tables as demonstrated at the bottom (expected output)? Is it feasible to achieve a layout like the one below? Shifting the bottom section up next to the plots. ...

Is there a more intelligent approach to incorporating Bootstrap classes (or classes from another less.css file) into my less file through inheritance?

I am trying to find a more efficient way to integrate bootstrap classes into my less file. Currently, I am doing the following, but it has the disadvantage that not every "subclass" or connected class is inherited for my own control: .BWForm_form-control ...

Having trouble converting NSData object to NSDictionary

Could there be an issue with the JSON output that is causing strange encoding when trying to extract information from a JSON file found on a blog? JSON: [{ "title": "A visit to McSorley\u0027s Old Ale House", "subtitle": "", "summary": "&bs ...

Deciphering numerical information from JSON in PHP

{ "986243810235765": { "dt_server": "2022-01-15 08:45:12", "dt_tracker": "2022-01-13 11:20:30", "lat": "1.213456", "lng": "103.789012", "al ...

Load JSON data and store it in a SAS dataset

Looking for help with reading data from a JSON file and storing the values in a SAS dataset. Below is an example of the JSON file named test.json: [ { "id":1, "name":"Johnson, Smith and Jones Co.", "amount":345.33, "Remark":"Pays on time ...

Python - Error: Invalid JSON data with additional information

Having an issue aggregating data from multiple json files: path_to_json = 'generated_playlists/p1/' json_files = [pos_json for pos_json in os.listdir(path_to_json) if pos_json.endswith('.json')] The format of the json files is as foll ...