What is a more effective option than sharing JSON outcomes?

I've been working on a stock widget and you can check out the code here: http://jsfiddle.net/thetuneupguy/h6RB8/

$(function() {
    $.getJSON('http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20yahoo.finance.quotes%20WHERE%20symbol%20in(%22GCF14.CMX%22%2C%22SIF14.CMX%22%2C%22PAH14.NYM%22%2C%22PLF14.NYM%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=', function(data) {

        console.log(data.query.results.quote);
        $.each(data.query.results.quote,function(key,val){
            var items = [];
            $.each(val,function(name,value){
                items.push('<li>' +name+ ' : '+ value + '</li>');
            });
            $('<ul/>', {'class': 'my-new-list',html: items.join('')}).appendTo('#blk-1');
        });

    });
});

I'm looking for suggestions on how to improve the display of the results and how to style them to fit better into my widget design. Any advice would be greatly appreciated. Thanks!

jqueryhtmlcssjsonjquery-ui

Answer №1

Is this information useful to you? Please inform me if you find it beneficial:

Answer №2

It seems like your message may have been misunderstood xD. Here is the code snippet for you:

    <$.each(data.query.results.quote, function(key, obj){
        var $tr = $('<tr/>', {'class': 'my-new-list'}).appendTo('#blk-1 table');           
        $tr.append($('<td/>').text(obj.Name || "-"));
        $tr.append($('<td/>').text(obj.Ask || "-"));
        $tr.append($('<td/>').text(obj.Bid || "-"));
        $tr.append($('<td/>').text(obj.Change || "-"));
        $tr.append($('<td/>').text(obj.ChangeinPercent || "-"));
    });

As you can see, we have a predefined number of columns in the table header, so we don't need to iterate over them

Code in action: http://jsfiddle.net/edgarinvillegas/h6RB8/2/

Greetings from La Paz, Bolivia

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

Tips for activating a sticky navigation button by scrolling down slightly

Currently in the process of developing a website using React and focusing on optimizing the mobile version first. One feature I am working on is to have a sticky navigation bar that remains at the top after scrolling down. In the attached picture, there is ...

htmlcssreactjs

An issue arises when attempting to send form information through email using PHP

I'm facing an issue with sending email from a form. Every time I submit the form, I receive an "error occurred" message as specified in my if else statement. This prevents the mail from being sent. Can you help me troubleshoot this problem? Below is t ...

phphtml

"Is there a way to extract a value from a JSON object using

I have an object with the following key-value pairs: { 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier': '918312asdasc812', 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name': 'Login1&a ...

javascriptjsontypescript

Having trouble passing multiple associative array values from JavaScript/AJAX to PHP

We have been encountering an issue when trying to pass multiple associative array values from JavaScript/AJAX to PHP, as the PHP file is receiving an empty object/array. Could someone kindly assist us in retrieving the values of an associative array from ...

javascriptphpjsonajax

Is there a method to access a website, trigger JavaScript functions, and subsequently retrieve the HTML content using PHP?

I am currently exploring options to access a webpage, execute JavaScript functions on it (thus altering the HTML content), and eventually save the modified version of the page. I'm uncertain if this approach is feasible, and if not, are there alternat ...

javascriptphphtml

Guide to turning off the Facebook iframe page plugin

I am facing a challenge with embedding a facebook iframe on my website. I want to disable it once the screen width reaches a specific point, but I am struggling to make the iframe disappear properly. Here is how I have attempted to implement this: window.o ...

javascripthtmlcss

Javascript code experiences a shift in two different styles within a single conditional statement

I'm new to web design and I'm having trouble getting this code to work properly. Can anyone help me fix it so that both styles are applied correctly? // Access the sign_up modal window var modal = document.getElementById('id01'); // A ...

javascripthtmlcss

Applying style changes to the height on scroll event in Javascript for Chrome, Firefox, and Internet Explorer

I am working on triggering an event when scrolling to a specific height. I have code that successfully adds a style in Chrome, but it is not functioning properly in IE. Can anyone provide assistance? myID = document.getElementById("subnav"); var mySc ...

javascripthtmlcss

Creating fresh texts by pairing the values in constants with variables

Make sure to carefully read the question before proceeding. I have attempted multiple commands in order to retrieve a single variable from the server [TSE](https://old.tsetmc.com/Loader.aspx?ParTree=15131F) which serves Stock Exchange information. The pag ...

javascriptjsonparsingfilter

"Trouble with jQuery not being triggered when there is a string in

New to the world of MVC and diving into jQuery for the first time, I am faced with a challenge. My goal is to populate text boxes in a partial view using jQuery that is placed within the parent view. Here are the relevant sections of the parent view: @ ...

javascriptc#jqueryasp.net-mvc

Display all pages in the DataTables plugin while utilizing responsive tables and additional features

I am struggling to combine the responsive and fixed header attributes of my current function with the "Show All" list feature, similar to what is demonstrated in this example: https://datatables.net/examples/advanced_init/length_menu.html I need assistanc ...

javascriptjquerycssdatatables

Malfunction in function calling due to improper ajax response (JSON)

There seems to be an issue with the success function not being executed in the JavaScript code below: $.ajax({ type: 'POST', url: 'http://localhost/hf_latest_desktop/st_pages/user_area/acc_buttons/pass_change/pass_ ...

jqueryajaxjson

Alignment of Submenus in a CSS Vertical Menu

I'm currently facing an issue with my vertical menu and submenu alignment. Despite everything working correctly, the submenu does not align horizontally as expected, instead shifting up against the header div above it. Any assistance to resolve this w ...

cssvertical-alignmentalignment

What is the method for incorporating a dotted line preceding the menu options?

I am currently working on an asp.net menu that looks like this: <div id="left"> <div id="menus" runat="server"> <div id="left_menu"> <div class="abc"> < ...

asp.netcss

Having difficulties with my online form

Each page of my website features the following form: <section class="footer-one"> <form action="sendmail.php" method="post" onsubmit="return validateForm()"> <div> <div class="row half"> <div class="6u"> <input type="text ...

phphtml

How can you make the contents of a <DIV> expand?

Picture a scenario where I have a navigation bar in the header of my web page, consisting of several links. What I want is for these links to expand horizontally to fill the parent container without me having to hard-code based on the number of links. In o ...

htmlcss

Guide on making a color legend with JavaScript hover effects

On my website, there is a dynamic element that displays a table when values are present and hides it when there are no values. The values in the table are color-coded to represent different definitions. I wanted to add hover text with a color key for these ...

javascriptjqueryhtmlcsshover

Javascript encountering issues with recognizing 'self.function' within an onclick event

Recently, I have been working on enhancing a Javascript file that is part of a Twitter plugin. One of the key additions I made was implementing a filter function for this plugin. Here is a snippet of the script showcasing the relevant parts: ;(function ( ...

javascriptjquerythisself

Retrieving data from a highly nested multi-dimensional array is essential for accessing specific values

My data consists of JSON decoded information about multiple hotels, each with various details such as name, star rating, and room types. Here is an example of the data structure: array: 10[▼ "HotelName" => "AL MANZIL DOWNTOWN DUBAI" "Preferr ...

phpjsonlaravelmultidimensional-array

How to retrieve data from a form object sent via cloud function using App Script

Currently, I am in the process of developing a web application that can extract files from a web form and store them in a designated Google Drive folder. After the user submits the form, my goal is to trigger a cloud function using google.script.run while ...

javascripthtmlgoogle-apps-script