What is the best way to extract the value of the initial data object from a JSON response that contains multiple data objects with identical names?

Currently, I am trying to integrate a value from a JSON request into a source URL. The code snippet I have below demonstrates my attempt:

function Source() {
$.ajax({
    type: "GET",
    dataType: "json",
    url: "https://api.hitbox.tv/media/video/chairstream/list?filter=recent",
    success: function(data) {
        var idvid = data.media_id;
        document.getElementById("latest").src = "http://www.hitbox.tv/#!/embedvideo/" + idvid() + "?autoplay=true";
    }
});

However, the variable idvid is not functioning correctly within the URL. Additionally, there are multiple data objects named "media_id" in the JSON response, and I only want to retrieve the value of the first occurrence of media_id. Any assistance with solving these two issues would be greatly appreciated.

javascriptjsonajaxapiurl

Answer №1

There seems to be an issue with having curly braces following idvid, the correct format should simply be as follows:

"http://www.hitbox.tv/#!/embedvideo/" + idvid + "?autoplay=true";

To obtain the media_id of the initial object within the data array:

var idvid = data.video[0].media_id;

Answer №2

I made a call to the URL and retrieved it using this 

data.video[0].media_id

thus (removed the () from the variable as suggested by Andy):

success: function(data) {
    $("#latest").attr("src","http://www.hitbox.tv/#!/embedvideo/" + 
     data.video[0].media_id + 
     "?autoplay=true");
}


var data = {
  "request": {
    "this": "\/media\/video\/chairstream\/list"
  },
  "media_type": "video",
  "video": [{
    "media_user_name": "chairstream",
    "media_id": "783994",
    "media_file": "2c767c827c6c84a4714b9379983de69449c5a1c1-5658c80c2b938",
    "media_user_id": "871797",
    "media_profiles": "[{\"url\":\"\\\/chairstream\\\/2c767c827c6c84a4714b9379983de69449c5a1c1-5658c80c2b938\\\/chairstream\\\/index.m3u8\",\"height\":\"800\",\"bitrate\":0}]",
    "media_type_id": "2",
    "media_is_live": "1",
    "media_live_delay": "0",
    "media_date_added": "2015-11-27 23:16:04",
    "media_live_since": null,
    "media_transcoding": null,
    "media_chat_enabled": "1",
    "media_countries": null,
    "media_hosted_id": null,
    "media_mature": null,
    "media_hidden": null,
    "media_offline_id": null,
    "user_banned": null,
    "media_name": "2c767c827c6c84a4714b9379983de69449c5a1c1-5658c80c2b938",
    "media_display_name": "chairstream",
    "media_status": "Chairstream.com - Nov 27th #5",
    "media_title": "Chairstream.com - Nov 27th #5",
    "media_description": "",
    "media_description_md": null,
    "media_tags": "",
    "media_duration": "6262.0000",
    "media_bg_image": null,
    "media_views": "9",
    "media_views_daily": "2",
    "media_views_weekly": "9",
    "media_views_monthly": "9",
    "category_id": null,
    "category_name": null,
    "category_name_short": null,
    "category_seo_key": null,
    "category_viewers": null,
    "category_media_count": null,
    "category_channels": null,
    "category_logo_small": null,
    "category_logo_large": null,
    "category_updated": null,
    "team_name": null,
    "media_start_in_sec": "0",
    "media_duration_format": "01:44:22",
    "media_thumbnail": "\/static\/img\/media\/videos\/2c7\/2c767c827c6c84a4714b9379983de69449c5a1c1-5658c80c2b938_mid_000.jpg",
    "media_thumbnail_large": "\/static\/img\/media\/videos\/2c7\/2c767c827c6c84a4714b9379983de69449c5a1c1-5658c80c2b938_large_000.jpg",
    "channel": {
      "followers": "0",
      "user_id": "871797",
      "user_name": "chairstream",
      "user_status": "1",
      "user_logo": "\/static\/img\/channel\/chairstream_5602c1d59d02e_large.png",
      "user_cover": "\/static\/img\/channel\/cover_53e89056cf3ef.jpg",
      "user_logo_small": "\/static\/img\/channel\/chairstream_5602c1d59d02e_small.png",
      "user_partner": null,
      "partner_type": null,
      "user_beta_profile": "0",
      "media_is_live": "0",
      "media_live_since": "2015-11-30 12:35:33",
      "user_media_id": "206125",
      "twitter_account": null,
      "twitter_enabled": null,
      "livestream_count": "1"
    }
  }]
}

console.log(data.video[0].media_id)

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

How come the gridApi.on.edit.beginCellEdit function in angular-ui-grid does not immediately refresh the dropdown options after being updated?

I am encountering a similar issue as described in this post Regarding the assignment of ui grid value drop-down box before beginCellEdit event fires in Angular However, I have noticed a slight difference. Even after updating the editDropdownOptionArray, th ...

javascriptangularjsangular-ui-grid

Is it possible for me to generate HTML using JavaScript?

Below is the javascript code I have written, saved as create.js: var stuff = document.querySelector(".stuff"); var item = document.createElement('div'); item.className = 'item'; stuff.appendChild(item); This is the corresponding HT ...

javascripthtmlcssdom

Send JSON data to Riak using the `curl` command

I am working with a JSON object: { title: "Some title", author: "Name", text: "This is text..." } My goal is to save this JSON data to my Riak database using the curl command as follows: curl -v -X PUT http://192.168.56.12:10018/riak/news/news1 ...

jsoncurlriak

What is the importance of utilizing clearInterval to restart the timer in ReactJS?

Consider the code snippet provided below: useEffect(() => { const interval = setInterval(() => { setSeconds(seconds => seconds + 1); }, 1000); return () => clearInterval(interval); }, []); What is the purpose of returning ...

javascriptreactjs

Tips for creating a POST request using mongoose in NextJS version 13.4

Currently, I am faced with the challenge of executing a POST request using mongoose in NextJS. In my project structure, I have three key files: lib/dbConnect.js, models/User.js, and app/new/route.ts. As defined, app/new/route.ts is responsible for handling ...

javascriptmongodbmongoosenext.jsnext.js13

Implementing <meta http-equiv="X-UA-Compatible" content="IE=9" /> with javascript to enhance compatibility

Encountering a peculiar issue with IE 10. While many jQuery scripts function flawlessly on IE 8, 9, Chrome, Firefox, and Safari, they seem to break on IE 10. This problem only surfaced when certain users switched over to IE 10. The simplest solution I stu ...

javascriptasp.netbrowser

There is a gap found in the span element in Angular, but this gap is not seen in

Comparing two component templates, one in AngularJS and the other in modern Angular: <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover"> <span class="app-icon ap ...

javascripthtmlangularangularjs

Why are imported modules unable to reach global variables in Node?

As I delve deeper into using ES6 and organizing my code across multiple files for better readability and version control, I've encountered an issue that has me puzzled. In one of my scenarios, I have a class defined in a separate file called class.js, ...

javascriptnode.jsclassimportglobal-variables

Automatically submitting a form in React.js based on certain conditions being met

Does anyone have experience with React login and register form buttons that trigger Redux actions? I'm facing an issue where both actions are being dispatched at the same time when certain conditions are met. Here is my code snippet: const LoginPage ...

javascriptreactjsredux

Getting access to UBER's authorize API is a straightforward process that involves following a few steps to retrieve

I have been attempting to retrieve the code from JSON using a specific URL in Postman, unfortunately, I have not been successful in obtaining the code in JSON format. Click here for Uber login Furthermore, when I access this URL in my browser, I am redir ...

jsonrestapioauth-2.0uber-api

Utilizing Ajax for dynamically updating a dropdown menu powered by Javascript

I have a question about implementing ajax in my category drop down box. Currently, I have a JavaScript function that redirects the page when a user selects a category. However, I would like to enhance this by loading the category items dynamically without ...

javascriptjqueryajax

Discovering the Keys of a Multidimensional Array in JSON with AngularJS

I'm attempting to create a form using a JSON array. I want to display the keys in the HTML. Check out this example array: { "Fred": { "description": "A dude" }, "Tomas": { "description": "Another Dude", "Work": { "Current" ...

htmlarraysangularjsjson

React HTML ignore line break variable is a feature that allows developers to

Can you help me with adding a line break between two variables that will be displayed properly in my HTML output? I'm trying to create an object with a single description attribute using two text variables, and I need them to be separated by a line b ...

javascriptreactjs

Deactivate particular JavaScript when displaying a Bootstrap modal

On mobile devices, I have JavaScript that is preventing vertical panning on modals, resulting in users not being able to see all the modal content. Is there a way to disable this JavaScript when a modal is displayed? The following snippet of JavaScript a ...

javascripttwitter-bootstrapbootstrap-modalbootstrap-5

Ajax Loading Bar similar to YouTube is not functioning as expected

I've implemented the YouTube-like Ajax Loading Bar to load a PHP file. Here is the JavaScript code I'm using: $(".ajax-call").loadingbar({ target: "#loadingbar-frame", replaceURL: false, direction: "right", async: true, complete: fun ...

phpjqueryajaxyoutubeloading

Adding a directive to create a table header

I'm having trouble with an angular directive that is meant to insert a table header. Unfortunately, instead of being placed inside the thead as intended, it ends up outside of the table element. Here's a link to the codepen: http://codepen.io/sac ...

javascripthtmlangularjs

Drop down menus fail to appear after the screen has been resized

Creating responsive menus involves using ordered and unordered lists, along with CSS for styling. I have added a script to dynamically generate dropdown menus, but encountered an issue where nothing appears on the screen upon resizing - only the backgrou ...

javascriptjqueryhtmlcsstwitter-bootstrap

Help with Web Scraping: Setting up Noodle.js and Using jQuery

After successfully installing noodle.js using npm install, my code looks like this. However, when I try to run the file (noodleTest.js) in the terminal with the command 'node noodleTest.js', I encounter the error message: jQuery.getJSON is not a ...

javascriptjqueryjsonajaxnode.js

"Exploring the magic of product galleries: A behind-the-scenes look at how websites create images

Have you ever wondered how this website creates the customization effect in its gallery? When you adjust the color, stones, or other attributes of the ring, it appears as though a new image is being generated. (click Customize) Do you believe they have a ...

javascripthtml3dvml

Unable to transmit information using Postman for registration API

I have been struggling to send data via a POST request to the register API, but for some reason, the data is not being transmitted. I have tried adjusting the settings on Postman, tinkering with validation rules, and various other troubleshooting steps, ye ...

javascriptexpresspostman