Problem in converting into Js Object

How can I convert these data into js object by retrieving from an ajax request

XG = [{
        id: "0d548577-28e4-5f77-b925-6074da6986d0",
        name: "Lizzie Park",
        hash: "681aba0a4bb59e15ba2bd7830856bd9e",
        number: "(536) 499-4520",
        email: "tecihum@vap.tv",
        address: !1
    }, {
        id: "c47e28f2-e971-5144-a340-b9ea777b33f5",
        name: "Lucinda Wade",
        hash: "8f1da5db5956c5b7eed5839c6b525964",
        number: "(609) 621-6729",
        email: !1,
        address: "407 Pavaji Square"
    }, {
        id: "c360ec4e-94e2-54f5-b23b-b9270cc60449",
        name: "Evan Patterson",
        hash: "36a7d5f6e075efb0a8812bfabcddc89e",
        number: "(417) 575-8385",
        email: "riow@esubi.hr",
        address: "1988 Azmu River"
    }];

You currently have an Array [] of Objects {}, if you were to just iterate through the array, you would gain access to each Object within that Array.

Hope this helps!

1 Like

That part is pretty weird. It’ll turn into false, but was it intended to mean something else? What is it that generated this request in the first place? (The usual convention for “data not present” BTW is null, not false)

1 Like

But I am getting string

show your code, show how you are getting a string

This is how i am getting the string

Annotation 2020-02-26 104943

can you post your code instead of a screenshot?

Here is the source code,

const url = "https://gist.githubusercontent.com/entrptaher/0d0229296e72aa8b42081729de2e2509/raw/e58cffe0060679198e608b9282ad8554bdda4d8f/sample-data.js";

let userTitles = document.querySelectorAll(".heading__title");


let btn1 = document.getElementById("btn1");
btn1.addEventListener('click', function(e){
    let xhr = new XMLHttpRequest();
    xhr.onload = function(){
        if(this.status == 200){
           let data = this.response;
          console.log(typeof(data));
        }
    }
    xhr.open("GET", url, true);
    xhr.send();
})

Right, you can’t really do this

It would involve either writing the file as a JS file to the document, or carefully parsing the blob of text, replacing the JS code and turning it into valid JSON, then running JSON.parse on the resultant string (latter is what I tried to do when checking what you were trying to do).

It isn’t executable JS, it’s just a text file. You can’t fetch random text files then execute them, that’s not something that’s a great idea security-wise.

If it was JSON data, this would be no problem, because you then just run JSON.parse and get the data as an object. But it is not.

The code I’m using to check this:

async function f() {
  const res = await fetch("https://api.github.com/gists/0d0229296e72aa8b42081729de2e2509");
  const data = await res.json();
  // We're fine at this point, when I do
  // this I get the file contents:
  console.log(data.files["sample-data.js"].content);
  // BUT IT IS JUST TEXT

  try {
    let fileText = data.files["sample-data.js"].content;
    // NOW TRYING TO MAKE IT INTO
    // SOMETHING THAT WILL GO INTO
    // THE JSON PARSE FUNCTION
    // WITHOUT EXPLODING 
    fileText = fileText.replace(/XG = /, "");
    fileText = fileText.replace(/id: /gm, "\"id\": ");
    fileText = fileText.replace(/name: /gm, "\"name\": ");
    fileText = fileText.replace(/hash: /gm, "\"hash\": ");
    fileText = fileText.replace(/number: /gm, "\"number\": ");
    fileText = fileText.replace(/email: /gm, "\"email\": ");
    fileText = fileText.replace(/address: /gm, "\"address\": ");
    fileText = fileText.replace(/;/gm, "");
    // I gave up at this point as I have
    // better things to do, but this fails:
    return JSON.parse(fileText);
  } catch (err) {
    console.error(err)
  }
}

Just fork the gist and convert it to JSON, then you can actually get JSON and parse it. Converting arbitrary text (and yes, even though this text has the title sample-data.js it’s still just arbitrary text, it’s no use for transferring over a network) to JS is not a good idea

1 Like

You can also add the following to your html file above any script where you want to reference and directly access the XG as a global variable.

<script type="text/javascript" src="https://gist.githack.com/entrptaher/0d0229296e72aa8b42081729de2e2509/raw/e58cffe0060679198e608b9282ad8554bdda4d8f/sample-data.js"></script>

Example:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<button id="btn1">Click</button>
<script type="text/javascript" src="https://gist.githack.com/entrptaher/0d0229296e72aa8b42081729de2e2509/raw/e58cffe0060679198e608b9282ad8554bdda4d8f/sample-data.js"></script>
<script>
  XG.forEach(({ name }) => {
    console.log(name);
  })
  
</script>
</body>

</html>

I actually think there is a way to do this using GitHub (as a CDN link), but I have not figured out how to reference the correct link without getting a 403 error.

1 Like

Ah, I didn’t think to just get the file directly in the document, was too hung up on getting it via AJAX

Would the following try/catch suffice?

  try {
    let fileText = data.files["sample-data.js"].content;   
    fileText = fileText.replace(/XG = /, "");
    const jsonString = JSON.stringify(fileText);
    return JSON.parse(jsonString);
  } catch (err) {
    console.error(err)
  }
1 Like

Would switching from AJAX to fetch cause problems within a program or lose browser compatibility with certain things? I know fetch is used to get out of callback hell, but it seems like it lacks the browser compatibility for IE that AJAX has.

No, problem is that you need to replace all of the keys as well (name needs to be "name") for example, + get rid of the ; at the end, + get rid of the !1's.

Edit: and stringify was blowing up on me, I think because it was a string to start with that iot couldn’t parse as being JS but maybe I was just doing something bad

So I have this monstrosity:

async function f() {
  const res = await fetch("https://api.github.com/gists/0d0229296e72aa8b42081729de2e2509");
  const data = await res.json();
  // We're fine at this point, when I do
  // this I get the file contents:
  console.log(data.files["sample-data.js"].content);
  // BUT IT IS JUST TEXT

  try {
    let fileText = data.files["sample-data.js"].content;
    // manually parse the JS code string into something JSON-parse-compatible
    fileText = fileText.replace(/XG = /, "");
    fileText = fileText.replace(/id: /gm, "\"id\": ");
    fileText = fileText.replace(/name: /gm, "\"name\": ");
    fileText = fileText.replace(/hash: /gm, "\"hash\": ");
    fileText = fileText.replace(/number: /gm, "\"number\": ");
    fileText = fileText.replace(/email: /gm, "\"email\": ");
    fileText = fileText.replace(/address: /gm, "\"address\": ");
    fileText = fileText.replace(/\!1/gm, "null");
    fileText = fileText.replace(/;/gm, "");
    
    const obj = JSON.parse(fileText);
    console.log(obj)
    return obj;
  } catch (err) {
    console.error(err)
  }
}

:partying_face:

I created a pen and only had to use the replace method twice (not removing the semi-colon did not seem to affect anything). Am I missing something?

fetch is still AJAX. You can add a poly-fill to still be able to use fetch for older browsers.

1 Like

Yeah, just edited the reply, I was missing the !1 replacement which is why I couldn’t get it to go through stringify & why I ended up manually replacing everything :man_facepalming:

1 Like

I mean, the general consumer operating systems IE runs on are not supported by Microsoft anymore so it’s a small concern unless you have very specific needs (Windows Server support, for example), but yeah it can be polyfilled very easily if that support is needed.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.