JSON format error

General
1

I am trying to fetch JSON data, but I cannot seem to get it processed to the right format. The JSON I want to fetch looks like this: {"someName":{"id":55514376,"name":"SomeName2","profileIconId":533}}

Is there any way to display the someName and then the attributes it has?

If I am using this code: <Text Value="{someName}" TextWrapping="Wrap" Alignment="Left" Margin="5" /> it does not work. If I edit the JSON to be only the attributes, like this: [{"id":55514376,"name":"SomeName2","profileIconId":533}] , it works fine.

2

Hi,

In your first dataset, it looks like what you want is <Text Value="{someName.name}" />. Does that help?

3

Anders Lassen wrote:

Hi,

In your first dataset, it looks like what you want is <Text Value="{someName.name}" />. Does that help?

Kind of! :). I had to add in the beginning and in the end of the JSON for it to work. Is there a way so the brackets are not needed? Since the JSON I get from the api doesn’t include the brackets.

Maybe I can just add the brackets to the observable I created, or?

4

If you are using your data in an Each, then yes, it must be an array. Otherwise you shouldn’t need to.

5

Makes sense :).

If I have a lot of different unknown “someName” is there a way to get all of those and their attributes?

I’m using this json for the testing: [https://api.myjson.com/bins/4echf](https://api.myjson.com/bins/4echf) (I’ve changed someName to frederik)

6

FrederikBruun wrote:

Makes sense :).

If I have a lot of different unknown “someName” is there a way to get all of those and their attributes?

I’m using this json for the testing: [https://api.myjson.com/bins/4echf](https://api.myjson.com/bins/4echf) (I’ve changed someName to frederik)

Or rather JSON of this format:

{"champions":[{"id":266,"active":true,"botEnabled":false,"freeToPlay":false,"botMmEnabled":false,"rankedPlayEnabled":true},{"id":103,"active":true,"botEnabled":false,"freeToPlay":false,"botMmEnabled":true,"rankedPlayEnabled":true},{"id":84,"active":true,"botEnabled":false,"freeToPlay":false,"botMmEnabled":true,"rankedPlayEnabled":true},{"id":12,"active":true,"botEnabled":true,"freeToPlay":false,"botMmEnabled":true,"rankedPlayEnabled":true},{"id":32,"active":true,"botEnabled":true,"freeToPlay":false,"botMmEnabled":true,"rankedPlayEnabled":true}]}

7

If I have a lot of different unknown “someName” is there a way to get all of those and their attributes?

I didn’t understand the question, sorry

8

Let’s say I want to list all of the different id’s in the JSON above. How could I do that? :slight_smile:

9

List them how? In the app UI?

10

I am assuming you are fetching this data from a web-api. The biggest challenge when doing that, is that you need to convert the data to an observable, and make your someName's reachable from ux by converting them to values instead of a key.

Have a look at this for some information on how that is done: http://stackoverflow.com/questions/983267/access-the-first-property-of-an-object

Here is an example that downloads your json file, and converts it to something we can show in UX:

  <JavaScript>
    var Observable = require("FuseJS/Observable");
    var userData = Observable();
    fetch('https://api.myjson.com/bins/4echf').then(function(response) {
        return response.json();
    }).then(function(value) {
        userData.replaceAll(value); //Fill an observable with the data
    });
    module.exports = {
        users: userData.map(function(item) {
        return {name: Object.keys(item)[0],
            data: item[Object.keys(item)[0]]};
    })
    };
  </JavaScript>
  <StackPanel>
    <Each Items="{users}">
      <StackPanel Orientation="Horizontal">
    <Text Value="{name}" />
    <Text Value="{data.id}" TextColor="#aaa" FontSize="10" Alignment="Center" Margin="10,0,0,0"/>
      </StackPanel>
    </Each>
  </StackPanel>

This is what we are doing:

  • fetching your json file, and parsing the json from it
  • Feed the parsed json into an observable we call userData(we use replaceAll since the json’s root container is an array, so we expect multiple users)
  • Map every entry in the userData array to another observable, where we map the key, somename, to the value of a key called name, and the value of someName to data.

The converted array should look something like this:

[{"name": "frederik", "data": {"id":55238276,"name":"Frederik","profileIconId":531,"summonerLevel":30,"revisionDate":1467543446000}}]

Note that you can avoid all this by having someName as a value, not a key, in your json data.

Have fun :slight_smile:

11

Thanks a lot to both of you! :slight_smile:

I’ll take a look at this later when I have the time.