2

Background :

I need to get the image from path from below json file :

{
  "path" : " shape\/",
  "info" : {
    "author" : ""   
  },
  "name" : "shape",
  "layers" : [
    {     
      "height" : 612,
      "layers" : [
        {         
          "name" : "bg_rectangle_1"
        },
        {         
          "height" : 475,
          "layers" : [
            {

              "src" : "http://sitename.com/images/oneheart.png",             
              "name" : "mask_image_1"
            },
            {              
              "name" : "useradd_ellipse1"
            }
          ],          
          "name" : "user_image_1"
        }
      ],      
      "name" : "loveshape_17"
    }
  ]
}

I successfully did it with below code :

var maskedImageUrla = "";

    $.getJSON('test.json', function(json) {
        for (let layer of json.layers) {
            if (layer.layers && layer.layers.length > 0) {
                for (let temp of layer.layers) {
                    if (temp.src) maskedImageUrla = temp.src;
                    else if (temp.layers) {
                        for (let tl of temp.layers)
                            if (tl.src) maskedImageUrla = tl.src;
                    }
                }
            }
        }

Requirement :

In above json file if src is like this : "src" : "oneheart.png" [instead of full path] , than how to get the image ? becasue image exist in this path : http://sitename.com/images/oneheart.png

Here is Full script & json file

Improve this question
3
  • 2
    If the path is fixed, search of / and append the url if it is not found Commented Feb 25, 2019 at 5:25
  • @CerlinBoss Thanks for suggestion, means are you telling me to add full url in json file ? sorry, i have thousands of json files..... so i need to do with code.... as the path is same for all thousand json files... Commented Feb 25, 2019 at 5:26
  • 2
    You don't have to add path in json file. Just keep a variable with domain name like : var a = sitename.com/images and concat the name of file when creating the element like this : imageUrl = a + obj.src Commented Feb 25, 2019 at 5:28

4 Answers 4

Reset to default
2

You can change this 

 if (tl.src) maskedImageUrla = tl.src;

to this

if(tl.src.includes('/')){
   maskedImageUrla = tl.src
} else {
   maskedImageUrla = `http://sitename.com/images/${tl.src}`
}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

@vickeycolors you need to replace only the inner if. show me how you replaced in your code. the error is pretty clear you don't have t1 defined.
Also here i added your code, please check link
@vickeycolors You should check the code before copying it from the internet. There is a typo in the code. Instead of using tl, u have copied t1 from the answer above
@CerlinBoss sorry for that, now updated code, still got this error : prnt.sc/mponlx , but i found solution and i will post it now.....
0

You could use the navigator.location.origin property and concat the string in runtime. For example:

var maskedImageUrla = "";

    $.getJSON('test.json', function(json) {
        for (let layer of json.layers) {
            if (layer.layers && layer.layers.length > 0) {
                for (let temp of layer.layers) {
                    if (temp.src) {
                       maskedImageUrla = navigator.location.origin + '/images/' + temp.src;
                    }
                    else if (temp.layers) {
                        for (let tl of temp.layers)
                            if (tl.src) maskedImageUrla = tl.src;
                    }
                }
            }
        }
Improve this answer

2 Comments

hi, do you have any idea how to fetch if there are multiple images in json ? i tried this code : codepen.io/kidsdial/pen/RdwXpZ , but its displaying only one image....
@vickeycolors Well, that's another question :). Please post a new question with an example of what you're trying to achieve. With just this snippet, there's no way to point you to a solution.
0 

var str = 'http://sitename.com/images/oneheart.png';


var strCopy = str.substring(str.lastIndexOf('/') + 1, str.length);
console.log(strCopy);
console.log('http://sitename.com/images/' + strCopy);

Improve this answer

4 Comments

Thanks for answer, but i have 1000's of json file, so its not possible to keep the image name as oneheart.png in each json files.....
hi, do you have any idea how to fetch if there are multiple images in json ? i tried this code : codepen.io/kidsdial/pen/RdwXpZ , but its displaying only one image....
@vickeycolors you have to loop on your json and then pass your value in these params.
@vickeycolors tell me about the exact pattern of you json or does it vary ?
0

Instead of adding the prefix to t1.src , i added the prefix to temp.src, so it was not working..... Below solution worked for me 

var maskedImageUrla = "";

    $.getJSON('test.json', function(json) {
        for (let layer of json.layers) {
            if (layer.layers && layer.layers.length > 0) {
                for (let temp of layer.layers) {
                   if (temp.src) maskedImageUrla = temp.src;
                    else if (temp.layers) {
                        for (let tl of temp.layers)
                            if (tl.src) maskedImageUrla = 'http://sitename.com/images/' + tl.src;
                    }
                }
            }
        }
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.