How do I run a loop through JSON code to find only specific strings in javascript?

Question

I am working with Figma API and I am parsing some JSON (this is not my entire JSON FILE). A little context about the JSON file:

None of these JSON objects are next to each other.
All JSON objects fall in objects but they appear sequentially
and their are an unlimited amount of absoluteBoundingBox
and the absoluteBoundingBox could go by other names I'm not sure what names are or would be.

The issue I'm running into is:

I need to loop through each absoluteBoundingBox
give that absoluteBoundingBox a unique id
and its own x y and width and height variables`
store those in a new variables so that the variable containing the objects will need to be created every time a absoluteBoundingBox appears.

I know this is a big scope of work. But I need to know where to start.

JSON

[{
  id: "6:3",
  absoluteBoundingBox: [{
    x: -406,
    y: -274,
    width: 437,
    height: 56
  }]
}],
[{
  id: "10:3",
  absoluteBoundingBox: [{
    x: -406,
    y: -201,
    width: 437,
    height: 56
  }]
}],
[{
  id: "10:4",
  absoluteBoundingBox: [{
    x: -406,
    y: -122,
    width: 437,
    height: 56
  }]
}],
[{
  id: "10:5",
  absoluteBoundingBox: [{
    x: -406,
    y: -28,
    width: 437,
    height: 56
  }]
}]

JS

const frameJSON = {};
const getFrame =
  args.document["children"][0]["children"][0]["absoluteBoundingBox"];

var manyFrames = args.shift().filter(function(v) {
  return args.every(function(a) {
    return a.indexOf(v) !== -1;
  });
});



var FrameID = {};
var textHeight = [];
var textWidth = [];
var textY = [];
var textX = [];
var FrameID = [];
var frameSize = getFrame.keys(getFrame).length;
frameJSON.getFrame = [];
for (b; b > frameJSON; b++) {
  if (b < getFrame.frameSize) {
    [x] = frameJSON.getFrame.push(getFrame[b].x);
    [y] = frameJSON.getFrame.push(getFrame[b].y);
    [width] = frameJSON.getFrame.push(getFrame[b].width);
    [height] = frameJSON.getFrame.push(getFrame[b].height);
    [id] = frameJSON.getFrame.push(getFrame[b].id);
  }
}

what is being returned

\ right now I am returning these variables with in my FrameJSON OBJECT I would like to crate atleast 4 FrameJSON objects.

I tried:

const getFrame =
  args.document["children"][0]["children"][0]["absoluteBoundingBox"];
  const listOfFrames = []

  //https://stackoverflow.com/questions/52672037/js-multiple-objects-in-an-array-stored-in-local-storage

  getFrame.push('absoluteBoundingBox');
  getFrame.push('id');
  showList.concat(JSON.parse(localStorage.getItem('listOfFrames')))
  localStorage.setItem("listOfFrames", JSON.stringify(listOfFrames));

in order to get a list of frames but the code isn't running like I expected.

Ian Heisler · Accepted Answer · 2019-11-18 05:16:27Z

1

Change the ( ) to [ ] in the raw JSON string and parse it as an array of 4 objects. Then you can parse the JSON object directly in a browser's developer console.

var json=" ... paste your [] wrapped JSON string here";
//edit: if you have no control over the source string, do a replacement before parsing:
json=json.replace(/\(/g,'[').replace(/\)/g,']');

var objs=eval('('+json+')');
for (k in objs){
  var obj=objs[k];
  //do whatever you want with the obj here
}

To further illustrate the difference in formatting, try this in a browser console:

objs=({a:'123',b:'xx'},{a:'222',b:'yy'});

This will give an object of one element, as the ( ) is not proper format.

But this:

objs=[{a:'123',b:'xx'},{a:'222',b:'yy'}];

gives both objects. However, when a JSON string is transported, it is a string, so the following doesn't give a proper collection, but a string:

json="[{a:'123',b:'xx'},{a:'222',b:'yy'}]";

A nice trick to convert a string representation of a JSON object is to eval it like this:

json2="([{a:'123',b:'xx'},{a:'222',b:'yy'}])";

note the added brackets!

objs=eval(json2); //this gives you a proper array

BUT, your original string has ( ) instead of [ ], so the string replacement is necessary.

edited Nov 18, 2019 at 5:16

answered Nov 18, 2019 at 4:46

Ian Heisler

1116 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Zachary Blumstein Over a year ago

thanks for your reply. I think I know what your trying to say. Could you add a bit more to your answer so I can understand what you are trying to do. I also can't change the JSON file because the JSON is being pulled from an API. @IanHeister

Ian Heisler Over a year ago

I have added two lines to address this issue.

Zachary Blumstein Over a year ago

what does a replacement before parsing do to my JSON do you have an example? @Ian Heisler

Ian Heisler Over a year ago

explanation added to the answer. hope this helps.

Zachary Blumstein Over a year ago

I'm not sure what issue you are solving? Are you just saying that I'm not able to work with the JSON because it is not formatted properly because that wasn't the issue stated above. I'm working with the JSON that Figma gives me.

|

Collectives™ on Stack Overflow

How do I run a loop through JSON code to find only specific strings in javascript?

JSON

JS

what is being returned

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

JSON

JS

what is being returned

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related