I would like to exclude specific elements from json to being loaded on canvas

I am looping through the Json  and searching for elemnets which have part of id="polyiCircle" or "polyLine" to exclude them from loading on canvas. How must I use next  code snippet

canvas.loadFromJSON( element1, function() {    
                canvas.renderAll();
                 }) 

Open in new window

or what other changes must I make in code below  to get the result?
var fromJson;
function getJsonF(){ 
$.ajax({
  method:"POST",
  url: '/wp-content/themes/4/PgetJson.php',
  data:  {
    "getCanvas":1,
    "whichProject":whichProjectToSave,
    },
    datatype: "text",
    success: function(strdate){
   console.log("getJsonF; "+strdate);
  var jsonParse=JSON.parse(strdate);
   
    for (var i = 0; i < jsonParse.objects.length; i++) {
        var element1=jsonParse.objects[i];
        var justIDC =jsonParse.objects[i].id;
           if (justIDC.includes('polycircle')){// do nothing     
         }else{
              if (justIDC.includes('polyline')){// do nothing  }else{
                canvas.loadFromJSON( element1, function() {    
                canvas.renderAll();
                 }) 
              }            
         }
    }
     },
     error: function(error, txtStatus) {
      console.log(txtStatus);
      console.log('error');
    }
 });
}

Open in new window

Ivan GolubarAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Brian DayhoffSenior Full Stack DeveloperCommented:
If the data is composite (meaning that keys may be arbitrarily nested at any depth level), then you need to use recursion instead of just a loop.
0
Julian HansenCommented:
Some comments on your code
1. Line 13 instead of doing this
 var jsonParse=JSON.parse(strdate);

Open in new window

Add the
dataType: 'JSON'

Open in new window

 to your AJAX options (in place of the dataType: 'text' you currently have). jQuery will then parse the JSON for you and call your callback with a JavaScript object

2. Use the returned promise (then(), done()) instead of the success option call back which is being deprecated

3. Always format your code neatly - you will find you don't make as many errors and bugs are easier to find

Applying the above to your code we get this
var fromJson;
function getJsonF(){ 
  $.ajax({
    method:"POST",
    url: '/wp-content/themes/4/PgetJson.php',
    data:  {
      "getCanvas":1,
      "whichProject":whichProjectToSave,
    },
    dataType: 'JSON'
  }).then(function(resp) {
    for (var i = 0; i < resp.objects.length; i++) {
      var element1=jsonParse.objects[i];
      var justIDC =jsonParse.objects[i].id;
      if (justIDC.includes('polycircle')){
        // do nothing     
      }
      else{
        if (justIDC.includes('polyline')){
          // do nothing
        }
        else{
          canvas.loadFromJSON( element1, function() {    
            canvas.renderAll();
          }) 
        }
      }
    }
  })
  .fail(function(error,txtStatus) {
    console.log(txtStatus);
    console.log('error');
  }
}

Open in new window

To answer your question - can you post the JSON response so that we can see what the data looks like.
0
Ivan GolubarAuthor Commented:
Next is my Json containing canvas.
While retriving elements back on canvas from it, I have to exclude elements which have part of id="polyicircle" or "polyline".  
See  "filter" in my code
 if (justIDC.includes('polycircle')){,   if (justIDC.includes('polyline')){

Open in new window

So, in next example i want just last element with id="somthingelse"

{"objects":
[
{"type":"line","fill":"green","stroke":"green","strokeWidth":4, "id":"polyline1","name":"1”,"x1":-69,"x2":69,"y1":-96.5,"y2":96.5}},

{"type":"line","fill":"green","stroke":"green","strokeWidth":4, "id":"polyline2","name":"1”,""x1":-29.5,"x2":29.5,"y1":61.5,"y2":-61.5},

{"type":"circle","left":42,"top":53.91,"fill":"#fff","stroke":"#666","strokeWidth":1,"radius":6,"id":"polycircle0","name":"1"},

{"type":"circle", left":180,"top":246.91, fill":"#fff","stroke":"#666","strokeWidth":1,"radius":6,"id":"polycircle2","name":"1",},

{"type":"circle","left":239,"top":123.91,"fill":"#fff","stroke":"#666","strokeWidth":1,"radius":6, "id":"something else","name":"1"}
]
}
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
Your JSON is invalid - there are several errors. Here is the corrected JSON
{
   "objects":[
      {
         "type":"line",
         "fill":"green",
         "stroke":"green",
         "strokeWidth":4,
         "id":"polyline1",
         "name":"1",
         "x1":-69,
         "x2":69,
         "y1":-96.5,
         "y2":96.5
      },
      {
         "type":"line",
         "fill":"green",
         "stroke":"green",
         "strokeWidth":4,
         "id":"polyline2",
         "name":"1",
         "x1":-29.5,
         "x2":29.5,
         "y1":61.5,
         "y2":-61.5
      },
      {
         "type":"circle",
         "left":42,
         "top":53.91,
         "fill":"#fff",
         "stroke":"#666",
         "strokeWidth":1,
         "radius":6,
         "id":"polycircle0",
         "name":"1"
      },
      {
         "type":"circle",
         "left":180,
         "top":246.91,
         "fill":"#fff",
         "stroke":"#666",
         "strokeWidth":1,
         "radius":6,
         "id":"polycircle2",
         "name":"1"
      },
      {
         "type":"circle",
         "left":239,
         "top":123.91,
         "fill":"#fff",
         "stroke":"#666",
         "strokeWidth":1,
         "radius":6,
         "id":"something else",
         "name":"1"
      }
   ]
}

Open in new window

To find the elements matching something else we use a filter
Assume the above JSON is parsed into var objects;
// This will result in a new array containing only the elements
// that have the specified ID
var filteredArray = objects.filter(function(item) {
    return item.id == 'something else';
});

Open in new window

If you want to filter on more than one value just use boolean operators
// This will result in a new array containing only the elements
// that have the specified ID
var filteredArray = objects.filter(function(item) {
    return item.id == 'something else' || item.id == 'yet another thing';
});

Open in new window

0
Ivan GolubarAuthor Commented:
I don't know what will be the content inside ' '.
But i know that i must not include 'polycircle' or 'polyline'.
0
Julian HansenCommented:
Was there a question? Did you read through my post?

The .filter() function is what you are looking for - it will iterate over your items in your array and filter out those that match the condition. Simply alter the condition to match your requirements.
0
Ivan GolubarAuthor Commented:
I would like to exclude specific elements  from json  to being loaded on canvas



My Json contains items with three different  sets of elements:
1.elements which contains in its id 'polycircle' .    Example: polycircle0, polycircle1, polycircle2....
2.elements which contains in its id 'polyline' .    Example: polyline0, polyline1, polyline2....
3.elements which contains in its id 'manyDifferentCases' .    Example: somethingDifferent,anotherThing, andsoOn....

Next :
var filteredArray =objects.filter(function(item) {
    return item.id.includes('polycircle')||item.id.includes('polyline');
});

Open in new window

will copy out elements from case 1 and 2..

But i need to cut them out.

So i might then have two Json variables. var FirstOne = filteredArray which will include elements from case 1 and 2.
And var SecondOne which will include elements from case 3.

Because i want to load elements to canvas  from case 3 with
 canvas.loadFromJSON( SecondOne, function() {    
                canvas.renderAll();
                 }) 

Open in new window


and  to load elements from case 1 and 2 with  a specific task .
0
Julian HansenCommented:
will copy out elements from case 1 and 2..
As I said change the rules to match your requirements

var filteredArray =objects.filter(function(item) {
    return item.id.includes('polycircle')||item.id.includes('polyline');
});

Open in new window

Firstly - why are you using includes
a) id is a string not an array
b) includes is not cross browser compatible - just check for equality

var filteredArray =objects.filter(function(item) {
    // Filter out all those elements with polycircle OR polyline
    return (item.id != 'polycircle' && item.id != 'polyline');
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.