Get image URL from JSON and set it as button's source image

I am trying to extract an image URL from a JSON file like this: https://en.wikipedia.org/w/api.php?...images&format=json&aiprop=url&titles=Winnipeg

The JSON looks like this:

Suppose I extract an URL like this :

Code (CSharp):

1. JsonData jsonBooks = JsonMapper.ToObject(jsonString);
2.         string description = jsonBooks["allimages"][1]["descriptionurl"].ToString();

How do I use this data to assign a Button's Source Image from UI using the image URL obtained from the above JSON?

I am using LitJSON and the method showed in here http://blog.paultondeur.com/2010/03...al-xml-and-json-files-with-unity-part-2-json/

 

Just to be sure. Do you want to download the image from the obtained source URL and set that image as the texture of an UI element? If so, you could use this to download the image:

http://docs.unity3d.com/ScriptReference/WWW-texture.html

Once it's downloaded just assign it to any UI element.

 

Okay, so to test I just attached the example code to an UI button.
Added a Mesh Renderer component.
Then added Start() event to OnClick() of the button.
I don't see any compilation errors. Nor do I see any images loaded. What to do ?

Code (JavaScript):

1. #pragma strict
2. public var url: String = "http://images.earthcam.com/ec_metros/ourcams/fridays.jpg";
3. function Start () {
4. // Start a download of the given URL
5.     var www: WWW = new WWW(url);
6.     if(www.isDone)
7.     {
8.     var renderer: Renderer = GetComponent.<Renderer>();
9.     renderer.material.mainTexture = www.texture;
10.     }
11. }
12.  
13.  

 

This worked for me (applying the texture to a plane that the script was attached to)

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3.  
4. public class NewBehaviourScript : MonoBehaviour {
5.  
6.     public string Url = @"http://images.earthcam.com/ec_metros/ourcams/fridays.jpg";
7.     // Use this for initialization
8.     void Start () {
9.         StartCoroutine ("LoadImage");
10.     }
11.    
12.     // Update is called once per frame
13.     void Update () {
14.    
15.     }
16.  
17.     IEnumerator LoadImage()
18.     {
19.         WWW www = new WWW(Url);
20.         yield return www;
21.  
22.         Debug.Log ("Loaded");
23.         Texture texture = www.texture;
24.         this.gameObject.GetComponent<Renderer>().material.SetTexture( 0,texture );
25.     }
26. }

 

ok, try this. Create a script and attach to your button. use this code in the script:

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UI;
3. using System.Collections;
4.  
5. public class ButtonImage : MonoBehaviour {
6.  
7.     public string Url = @"http://images.earthcam.com/ec_metros/ourcams/fridays.jpg";
8.  
9.     void Start () {
10.         StartCoroutine ("LoadImage");
11.     }
12.    
13.  
14.     void Update () {
15.        
16.     }
17.    
18.     IEnumerator LoadImage()
19.     {
20.         Debug.Log ("Start");
21.         WWW www = new WWW(Url);
22.         yield return www;
23.        
24.         Debug.Log ("Loaded");
25.         Texture2D texture = www.texture;
26.         //this.gameObject.GetComponent<>().material.SetTexture( 0,texture );
27.         Image img = this.gameObject.GetComponent<Image>();
28.         img.sprite = Sprite.Create (texture, new Rect (0, 0, texture.width, texture.height),Vector2.zero);
29.  
30.     }
31. }
32.  

 

Thank you so much gavinb80!
I am very new to Unity and it gets quite confusing on what went wrong.
I prefer using javascript. So, this is what I did to get my images from JSON URL. I didn't find any online resources for this, so I will post my bit of code here Cheers!

Code (JavaScript):

1. #pragma strict
2. import UnityEngine;
3. import LitJson;
4. import System;
5. import System.Collections;
6.  
7. public var url: String = CreateURL();
8. function Start () {
9.  
10.     var www: WWW = new WWW(url);
11.    
12.     yield WaitForSeconds(10);
13.    
14.     var jsonBooks: JsonData = JsonMapper.ToObject(www.text);
15.     var description: String = jsonBooks["query"]["allimages"][0]["url"].ToString();
16.     Debug.Log(description);
17.     var zzz: WWW = new WWW(description);  
18.     yield WaitForSeconds(10);
19.     Debug.Log ("Loaded");
20.     Debug.Log(zzz.texture);
21.    
22.         var texture: Texture2D = zzz.texture;
23.        
24.         var img: UnityEngine.UI.Image  = this.gameObject.GetComponent(UnityEngine.UI.Image);
25.         img.sprite = Sprite.Create (texture, new Rect (0, 0, texture.width, texture.height),Vector2.zero);
26.        
27.     Debug.Log("Done");
28.  
29. }
30.  
31.  
32. function CreateURL()
33. {
34.      var temp: String = "https://en.wikipedia.org/w/api.php?";
35.      var URLtemp: String = "action=query&list=allimages&format=json&aisort=name&aiprop=url&aiprefix=Octopus&iwurl=&rawcontinue=&titles=Octopus&redirects=&converttitles=";
36.      return temp + URLtemp;
37.    
38. }
39.  

 

Hi,
I would suggest to replace

Code (JavaScript):

1. yield WaitForSeconds(10);

with below code

Code (JavaScript):

1. yield wwwInstance;

And also .jpg will have different orientations based on exif info. So make sure you consider that meta data.

 

Using

Code (JavaScript):

1. yield wwwInstance ;

results in "Unknown identifier" error.
Did you mean,

Code (JavaScript):

1.   yield www Instance ;

? That too doesn't seem to work in javascript. Says a semicolon is needed.

 

Hi,
By wwwInstance I meant instance you created for WWW in your code. I saw two variables www and zzz in your code so instead of listing both, I just wrote wwwInstance.

Let me write down to clarify your confusion.

Code (JavaScript):

1. var www: WWW = new WWW(url);
2.  
3. yield www;
4.   ....
5.   ....
6.   ....
7. var zzz: WWW = new WWW(description);
8. yield zzz;