How to store JSON data from a file into an array of strings

Question

I am working on Dynamic Web Project in Eclipse and using HTML 5 and Javascript as well. I could manage to parse JSON file that is saved locally in my system though the code below:

$.getJSON( "/Users/Documents/workspace2/sample.json", function( data ) {
    var items = [];
    $.each( data, function( key, val ) {
        items.push( "<li id='" + key + "'>" + val + "</li>" );
    });
    $( "<ul/>", {
        "class": "my-new-list",
        html: items.join( "" )
    }).appendTo( "body" );
});

Let's suppose this is the JSON file:

{"resource":"A","literals":["B","C","D"]}

My question is: Is there any possibility to have an array of strings to store these elements that are inside the JSON file after parsing. I am quite new to jQuery and couldn't really manage to see these elements stored in an array of strings, for example. Could anyone help me with this issue please.

It's not clear to me what you want to do. Can you show us what the desired result of your code should be? — Blazemonger
– Blazemonger, Commented Oct 31, 2013 at 17:14
Well. I am using Arobr javascript for visualisation. At some point, I should show nodes that are labeled with strings. I would like to get from JSON file "A", "B", "C", and "D", store them in an array of string and use them for the Arbor Javascript to get them visualised in nodes. After parsing, what can I do to read or store "A", "B", "C" and "D" as strings in order to be used for later. — Mod
– Mod, Commented Oct 31, 2013 at 17:19
you could save data, which is an object at this point, to a variable that is scoped outside of the getJSON call but realize getJson is an asynchronous operation. So when this runs other things will continue to run until this completes then this will run the callback (the anon function you define in the call), so any variable you set inside of the getJson callback may not be available when you need it. — scrappedcola
– scrappedcola, Commented Oct 31, 2013 at 17:19
I would avoid storing presentation detail (i.e. the HTML) in your model, as really you should have separation of concerns i.e. It should be your presentation layer's responsibility to render the view, the data (i.e. your JSON) should be view/presentation agnostic i.e. have no knowledge of presentation detail. — Ben Smith
– Ben Smith, Commented Oct 31, 2013 at 17:22
I have defined an array which is outside the scope of getJson and added the following line: {outer.push( "<li id='" + key + "'>" + val + "</li>" ); After that I added the following line to see the first element of the array: {var node = sys.addNode('The First Element',{'color':'red','shape':'dot','label':outer.get(0)});} Unfortunately I cant get the first element of the string however it is defined outside the scope of getJson. Any idea, please? — Mod
– Mod, Commented Oct 31, 2013 at 17:32

Md Ashaduzzaman · Accepted Answer · 2013-10-31 19:11:38Z

2

Try this way :

jsonFile.json

{
    "resource":"A",
    "literals":["B","C","D"]
}

myFile.html

<html>
<head>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $.getJSON( "jsonFile.json", function( data ) {
                var items = [];
                $.each( data, function( key, val1 ) {
                    items.push( "<li><a href=#'" + key + "'>" + val1 +"</a></li>");     
                });
            });
                $( "<ul/>", {
                "class": "my-new-list",
                 html: items.join( "" )
                }).appendTo( "body" );
            });
        </script>

</head>
<body>
    //result will be displayed here 
</body>
</html>

Output :

output

edited Oct 31, 2013 at 19:11

answered Oct 31, 2013 at 17:29

Md Ashaduzzaman

4,0462 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mod Over a year ago

Thank you for this code. I am nearly there. I have one more problem. When I run your code, it gives me a long list with "Undefined". Any idea please? Your support would be very much appreciated.

Mod Over a year ago

Your code is working but it shows me a list of undefined items. As soon as I replace this.command and this.name with key val1 respectively, I get the expected results iteratively. What are this.command and this.name? May you please help me with this?

Md Ashaduzzaman Over a year ago

this.command returns the value of the command key and this.name returns the value of the name key of the json file i provided.

Mod Over a year ago

I copied and pasted your codes as they are. Unfortunately, I cant see any results so far. I am wondering why!.

Mod Over a year ago

I totally believe your answer is so correct. I think I am having a problem that I cant see the result. I right click on the file and select Open with -> Web browser. I cant understand why it is not working. I copied and pasted your codes as they are though but nothing in there.

|

Ankit Tyagi · Accepted Answer · 2013-10-31 17:35:00Z

1

var abc = JSON.stringify({"resource":"A","literals":["B","C","D"]});

var ab = JSON.parse(abc);

var arr=$.map(ab, function(value, index) {
   return [value];
});

Hope it helps.

answered Oct 31, 2013 at 17:35

Ankit Tyagi

2,37511 silver badges20 bronze badges

1 Comment

Mod Over a year ago

I have the json file saved in my local system. I cant copy the content of that file into the variable abc. Is there any solution where I can read the Json file, convert the data into String and display them in html. Thank you

Collectives™ on Stack Overflow

How to store JSON data from a file into an array of strings

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related