Guide on parsing non-JSON data using Hemera

Question

Guide on parsing non-JSON data using Hemera

I'm a newcomer to the world of Json and JavaScript. I currently have an url that provides a JSON response. However, the issue lies in the fact that the format is incorrect. Please refer to my response below:

var pd={ player: 
   { id: 363609002,
     game: 'bf4',
     plat: 'pc',
     name: 'm4jes',
     tag: 'BPt',
     dateCheck: 1487204427149,
     dateUpdate: 1474581052618,
     dateCreate: 1384980182606,
     dateStreak: 1474581052618,
     lastDay: '20160715',
     country: '',
     countryName: null,
     rank: 
      { nr: 121,
        imgLarge: 'bf4/ranks/r121.png',
        img: 'r121',
        name: 'Major General II',
        needed: 16110000,
        next: 
         { nr: 122,
           imgLarge: 'bf4/ranks/r122.png',
           img: 'r122',
           name: 'Major General III',
           needed: 16750000,
           curr: 16720600,
           relNeeded: 640000,
           relCurr: 610600,
           relProg: 95.40625 } },
     score: 16724643,
     timePlayed: 1476950,
     uId: '2832665149467333131',
     uName: 'm4jes',
     uGava: '721951facb53ed5632e196932fb6c72e',
     udCreate: 1319759388000,
     privacy: 'friends',
     blPlayer: 'http://battlelog.battlefield.com/bf4/soldier/m4jes/stats/363609002/pc/',
     blUser: 'http://battlelog.battlefield.com/bf4/user/m4jes/',
     editable: false,
     viewable: true,
     adminable: false,
     linked: false },}

Based on the above response, I need to extract the following output:

{
  game: 'bf4',
  plat: 'pc',
  name: 'm4jes',
  tag: 'BPt',
  score: 16724643,
  timePlayed: 1476950
}

What method should I employ in JavaScript to achieve the desired result?

javascript json parsing

Answer 1

Answer №1

Firstly, it's important to note that the URL is not providing a JSON response but rather a JS object literal. The distinction is discussed here.

To extract the string from the URL, you can utilize the jQuery method get():

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var jqxhr = $.get( "https://api.bf4stats.com/api/playerInfo?plat=pc&name=m4jes&output=js", function() {
  //Insert additional code here
});
</script>

Subsequently, jqxhr.responseText contains the string corresponding to the desired object. By using eval, we convert this string into an object:

pd = eval(jqxhr.responseText);

Now, we have a JS object literal with various name/value pairs. To retrieve specific values, simply use dot notation. For instance, accessing the game name can be achieved as follows:

pd.player.game

This results in:

var myNewObject = {
   game: pd.player.game,
   plat: pd.player.plat,
   name: pd.player.name,
   tag: pd.player.tag,
   score: pd.player.score,
   timePlayed: pd.player.timePlayed,
 }

Lastly, conversion of this JS object literal into JSON format can be done using the JSON.stringify() method:

console.log(JSON.stringify(myNewObject, null, '\t'));

The desired result is displayed:

{
    "game": "bf4",
    "plat": "pc",
    "name": "m4jes",
    "tag": "BPt",
    "score": 16724643,
    "timePlayed": 1476950
}

Here is the complete code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var jqxhr = $.get( "https://api.bf4stats.com/api/playerInfo?plat=pc&name=m4jes&output=js", function() {
  pd = eval(jqxhr.responseText);

  var myNewObject = {
   game: pd.player.game,
   plat: pd.player.plat,
   name: pd.player.name,
   tag: pd.player.tag,
   score: pd.player.score,
   timePlayed: pd.player.timePlayed,
 }

 console.log(JSON.stringify(myNewObject, null, '\t'));
});
</script>

Answer 2

Firstly, it's important to note that the URL is not providing a JSON response but rather a JS object literal. The distinction is discussed here.

To extract the string from the URL, you can utilize the jQuery method get():

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var jqxhr = $.get( "https://api.bf4stats.com/api/playerInfo?plat=pc&name=m4jes&output=js", function() {
  //Insert additional code here
});
</script>

Subsequently, jqxhr.responseText contains the string corresponding to the desired object. By using eval, we convert this string into an object:

pd = eval(jqxhr.responseText);

Now, we have a JS object literal with various name/value pairs. To retrieve specific values, simply use dot notation. For instance, accessing the game name can be achieved as follows:

pd.player.game

This results in:

var myNewObject = {
   game: pd.player.game,
   plat: pd.player.plat,
   name: pd.player.name,
   tag: pd.player.tag,
   score: pd.player.score,
   timePlayed: pd.player.timePlayed,
 }

Lastly, conversion of this JS object literal into JSON format can be done using the JSON.stringify() method:

console.log(JSON.stringify(myNewObject, null, '\t'));

The desired result is displayed:

{
    "game": "bf4",
    "plat": "pc",
    "name": "m4jes",
    "tag": "BPt",
    "score": 16724643,
    "timePlayed": 1476950
}

Here is the complete code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var jqxhr = $.get( "https://api.bf4stats.com/api/playerInfo?plat=pc&name=m4jes&output=js", function() {
  pd = eval(jqxhr.responseText);

  var myNewObject = {
   game: pd.player.game,
   plat: pd.player.plat,
   name: pd.player.name,
   tag: pd.player.tag,
   score: pd.player.score,
   timePlayed: pd.player.timePlayed,
 }

 console.log(JSON.stringify(myNewObject, null, '\t'));
});
</script>

Guide on parsing non-JSON data using Hemera

Answer №1

Similar questions

Maintain the same UI appearance when the checkbox state is altered

Adding a characteristic to every item in an array of objects

Acquiring JSON data within a JavaScript function using PHP

Create a dynamic animation page using Node.js, then seamlessly redirect users to the homepage for a smooth user

How does the magic of JSON.stringify seamlessly convert to my DTO object effortlessly?

How about: "Adding code to a specific location in Monaco editor using programming methods"

Troubleshooting problems with populating select options using jQuery on click

The program encountered an issue where it was unable to access the 'email' property due to its null value

retrieving information from a JSON document

Automatically refreshing content (e.g. button click updates div) and changing the URL on the webpage without refreshing, allowing users to stay on the current page even after manually refreshing

Filling a ButtonGroup in React with Buttons from an array

The second function in Vue.js was unable to initialize the data field within data() due to a missing call for assistance

Expanding the ul height with animation when the page loads

Unlock the power of AJAX in your WordPress site

Refresh a different Angular Controller after submitting a POST request

Working towards ensuring my website is responsive

Consistently receiving the identical result even when the checkbox remains unselected

Navigating forward slashes in JSON within a Java/Spring application: tips and tricks

How can custom CSS and JS be loaded in Sencha Touch based on the user's device - PC, tablet, or smartphone?

What is the best way to retrieve a list of players using a foreach loop from my JSON file?