JQuery: Iterate over JSON File

Question

I'm having trouble to iterate over JSON file and get his parameters, this is an example of JSON file i created:

{
  "One": { "Username": "", "Password": "", "unique3": "", "unique4": "", "unique5": "", "freeTextArea": "" },
  "Two": { "Username": "", "Password": "", "SecretKey":"", "Autologinurl":"", "CrmUid":"", "freeTextArea":"" },
  "Three": { "Username": "", "Password": "", "freeTextArea": "" }
}

I have this HTML input attribute:

<input type="text" name="platform" placeholder="Platform" id="platform"/>

What I want is to check if the Input is matching "one"/"two"/"three" from the JSON, and then create new input elements using DOM based on the parameters "one"/"two"/"three" have.

This is how I'm getting the JSON data using AJAX:

var platformJson = $.getJSON("platform.json");

How can I iterate correctly over this JSON file?

Does this answer your question? [How to iterate over a JavaScript object?](https://stackoverflow.com/questions/14379274/how-to-iterate-over-a-javascript-object) — fen1x, Mar 14 '21 at 08:54
I edited the JSON form, maybe it will be alot easier that way? or should i convert it into array? — , Mar 14 '21 at 08:50
Please don't make more work for other people by vandalizing your posts. By posting on the Stack Exchange network, you've granted a non-revocable right, under the [CC BY-SA 4.0 license](https://creativecommons.org/licenses/by-sa/4.0/), for Stack Exchange to distribute that content (i.e. regardless of your future choices). By Stack Exchange policy, the non-vandalized version of the post is the one which is distributed. Thus, any vandalism will be reverted. If you want to know more about deleting a post please see: [How does deleting work?](https://meta.stackexchange.com/q/5221) — Tomerikoo, May 02 '21 at 10:55
The wording is misleading - one does not iterate over a JSON file, one iterates over an object obtained by parsing the text content of a JSON file. Tha't why "How to itrate over a JavaScript object" answers don't mention the term JSON.. — traktor, May 02 '21 at 11:39

score 0 · Answer 1 · answered Mar 14 '21 at 08:51

You could try

$.getJSON('https://jsonplaceholder.typicode.com/todos/1', function (data) {
  $.each(data, function (key, val) {
    console.log(key);
  });
});

Basically you need to provide a callback to the getJSON() method, which will be run with the JSON that you got back.

Then you should iterate via $.each() which will restructure and give you the key and value of the JSON.

Then you could manipulate and do what you need to do.

T J · Answer 2 · 2021-03-14T08:59:41.767

You don't need to "iterate" access the value from a JavaScript object by key. You can do the following:

const response = {
  "One": {
    "Username": "one",
    "Password": "",
    "AffiliateID": "",
    "GI": "",
    "CI": "",
    "freeTextArea": ""
  },
  "Two": {
    "Username": "",
    "Password": "",
    "SecretKey": "",
    "Autologinurl": "",
    "CrmUid": "",
    "freeTextArea": "",
  },
  "Three": {
    "Username": "",
    "Password": "",
    "freeTextArea": ""
  }
}

const inputValue = $('#platform').val();
const keys = Object.keys(response);
console.log(keys.includes(inputValue));
const obj = response[inputValue];
console.log(obj);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" name="platform" placeholder="Platform" id="platform" value="One" />

I recommend using lowerCase keys for your JSON, so that it'll be easier for you to match throughout the application.

Majed Badawi · Accepted Answer · 2021-03-14T09:10:48.360

Get value of #platform input using .val()
Search for this value in data object and get the target
If the latter exists, iterate over it using $.each and append a new input to #platformForm using .append

const data = {
  "One": { "Username": "1", "Password": "1", "AffiliateID": "1", "GI": "1", "CI": "1", "freeTextArea": "1" },
  "Two": { "Username": "2", "Password": "2", "SecretKey":"2", "Autologinurl":"2", "CrmUid":"2", "freeTextArea":"2" },
  "Three": { "Username": "3", "Password": "3", "freeTextArea": "3" }
};
const platform = $('#platform').val();
const props = data[platform];

if (props) {
  $.each(props, function(prop, value) {
    $('#platformForm').append(
      `<input id="${prop}" value="${value}" />`
    );
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="platformForm">
  <input type="text" name="platform" placeholder="Platform" id="platform" value="One"/>
</form>

JQuery: Iterate over JSON File

3 Answers3