Click here to Skip to main content
15,849,996 members
Home / Discussions / JavaScript
   

JavaScript

 
AnswerRe: Copying from billing address to mailing address if they are the same not working correctly Pin
Richard Deeming12-Feb-23 23:02
mveRichard Deeming12-Feb-23 23:02 
GeneralRe: Copying from billing address to mailing address if they are the same not working correctly Pin
samflex13-Feb-23 6:14
samflex13-Feb-23 6:14 
QuestionAjax didn't work for cloning rows, But works for first row only Pin
amr aly3-Feb-23 9:35
amr aly3-Feb-23 9:35 
AnswerRe: Ajax didn't work for cloning rows, But works for first row only Pin
amr aly9-Feb-23 6:35
amr aly9-Feb-23 6:35 
QuestionI am using javascript to convert a large table to a pdf Pin
Zahira CHOUIBA26-Jan-23 4:22
Zahira CHOUIBA26-Jan-23 4:22 
QuestionRe: I am using javascript to convert a large table to a pdf Pin
Jeremy Falcon26-Jan-23 9:02
professionalJeremy Falcon26-Jan-23 9:02 
AnswerRe: I am using javascript to convert a large table to a pdf Pin
RickyJudith8-Feb-23 1:24
RickyJudith8-Feb-23 1:24 
QuestionI have problem importing images of Json File on HTML Table Pin
Member 1590151922-Jan-23 3:14
Member 1590151922-Jan-23 3:14 
Hello,

I successfully loaded the json responses into an HTML table. However, I am having a problem displaying the images of the json variables. I could only display the links. Here is the output:

Home Team 	                                              Match Date 	           Away Team
https://media-3.api-sports.io/football/teams/2939.png 	2023-01-22T20:30:00+03:00 	https://media-3.api-sports.io/football/teams/2934.png
https://media-3.api-sports.io/football/teams/2938.png 	2023-01-26T21:00:00+03:00 	https://media-3.api-sports.io/football/teams/2939.png
https://media.api-sports.io/football/teams/2931.png 	2023-02-03T17:00:00+03:00 	https://media.api-sports.io/football/teams/2939.png
https://media.api-sports.io/football/teams/2937.png 	2023-02-09T19:30:00+03:00 	https://media-3.api-sports.io/football/teams/2939.png
https://media-3.api-sports.io/football/teams/2939.png 	2023-02-17T17:00:00+03:00 	https://media-3.api-sports.io/football/teams/2936.png


Here is a sample of the json file:

<pre>array (
  'api' => 
  array (
    'results' => 10,
    'fixtures' => 
    array (
      0 => 
      array (
        'fixture_id' => 932017,
        'league_id' => 4633,
        'league' => 
        array (
          'name' => 'Pro League',
          'country' => 'Saudi-Arabia',
          'logo' => 'https://media-3.api-sports.io/football/leagues/307.png',
          'flag' => 'https://media-3.api-sports.io/flags/sa.svg',
        ),
        'event_date' => '2023-01-22T20:30:00+03:00',
        'event_timestamp' => 1674408600,
        'firstHalfStart' => NULL,
        'secondHalfStart' => NULL,
        'round' => 'Regular Season - 14',
        'status' => 'Not Started',
        'statusShort' => 'NS',
        'elapsed' => 0,
        'venue' => 'Mrsool Park',
        'referee' => NULL,
        'homeTeam' => 
        array (
          'team_id' => 2939,
          'team_name' => 'Al-Nassr',
          'logo' => 'https://media.api-sports.io/football/teams/2939.png',
        ),
        'awayTeam' => 
        array (
          'team_id' => 2934,
          'team_name' => 'Al-Ettifaq',
          'logo' => 'https://media.api-sports.io/football/teams/2934.png',
        ),
        'goalsHomeTeam' => NULL,
        'goalsAwayTeam' => NULL,
        'score' => 
        array (
          'halftime' => NULL,
          'fulltime' => NULL,
          'extratime' => NULL,
          'penalty' => NULL,
        ),
      ),


And here is the code for importing the json output into the HTML table:

JavaScript
<pre><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
    th{ 
        color:#fff;
            }
</style>


<table class="table table-striped">
    <tr  class="bg-info">
        <th>Home Team</th>
        <th>Match Date</th>
        <th>Away Team</th>
    </tr>

    <tbody id="myTable">
        
    </tbody>
</table>

<script>
	var myArray = []
	

	$.ajax({
		method:'GET',
		url:'https://api-football-v1.p.rapidapi.com/v2/fixtures/team/2939/next/10?rapidapi-key={API-Key}',
		success:function(response){
			myArray = response
			buildTable(myArray)
			console.log(myArray)
		}
	})



	function buildTable(data){
		var table = document.getElementById('myTable')
		for (var i = 0; i < data.api.fixtures.length; i++){
		const rm = data.api.fixtures[i];

			var row = `<tr>
					   <td>${rm.homeTeam.logo}</td>
					   <td>${rm.event_date}</td>
					   <td>${rm.awayTeam.logo}</td>
					  </tr>`
			table.innerHTML += row


		}
	}

</script>


As you can see, I need to show the images of homeTeam.logo and awayTeam.logo instead of their hyperlinks. Thanks in advance
AnswerRe: I have problem importing images of Json File on HTML Table Pin
Jeremy Falcon24-Jan-23 5:30
professionalJeremy Falcon24-Jan-23 5:30 
Questionsoftware access control Pin
Member 1589900419-Jan-23 1:51
Member 1589900419-Jan-23 1:51 
AnswerRe: software access control Pin
Richard Deeming19-Jan-23 2:25
mveRichard Deeming19-Jan-23 2:25 
QuestionUse async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206712-Jan-23 0:35
Member 1589206712-Jan-23 0:35 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 1:02
mveRichard Deeming12-Jan-23 1:02 
QuestionRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206712-Jan-23 2:38
Member 1589206712-Jan-23 2:38 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 3:31
mveRichard Deeming12-Jan-23 3:31 
PraiseRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206712-Jan-23 4:17
Member 1589206712-Jan-23 4:17 
GeneralRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 4:39
mveRichard Deeming12-Jan-23 4:39 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Jeremy Falcon12-Jan-23 9:44
professionalJeremy Falcon12-Jan-23 9:44 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Leon Scott Kennedy13-Jan-23 6:25
Leon Scott Kennedy13-Jan-23 6:25 
QuestionJava Script Pin
Prerna Kharbanda3-Jan-23 21:56
professionalPrerna Kharbanda3-Jan-23 21:56 
AnswerRe: Java Script Pin
Richard MacCutchan3-Jan-23 22:33
mveRichard MacCutchan3-Jan-23 22:33 
Questioncalendar validation Pin
Jithin P 202227-Dec-22 21:45
Jithin P 202227-Dec-22 21:45 
AnswerRe: calendar validation Pin
Dave Kreskowiak28-Dec-22 4:59
mveDave Kreskowiak28-Dec-22 4:59 
AnswerRe: calendar validation Pin
Jithin P 202229-Dec-22 4:31
Jithin P 202229-Dec-22 4:31 
AnswerRe: calendar validation Pin
Jeremy Falcon5-Jan-23 12:13
professionalJeremy Falcon5-Jan-23 12:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.