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?
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.