change data key name came from JSON dynamically AngularJS

Question

I have a multi-select that I made with angular-ui. I want to add an input that user can change the JSON key names so for example if the API that user add doesn't have "name" instead has "firstName" as the "key name" the app changes that and can work fine. how can I get this result? appreciate any help. my code is here

what I really want is this: I should add this multi-select as a widget to a software named bonita studio and it should have an option that user can choose any API that want to use and should have an input field that the user will choose which one of the API's key identifier to iterate. for example if instead of name the user wants to iterate over the email s/he should be able to do. I hope this explanation is enough

"use strict";

var app = angular.module("myApp", ['ui.select', 'ngSanitize']);

app.controller("myCtrl", function($scope, $http) {

  $scope.headers = "";

  var counter = 0;
  var chunks = 5;

  $scope.datas = [];

  $scope.getData = function getData() {
    return $http({
        method: "GET",
        url: "data.json"
      })
      .then(function onSuccess(response) {
        for (let i = 0; i < response.data.length; i++) {
          $scope.datas.push(response.data[i]);
        }
        //counter += chunks;
      })
      .catch(function onError(response) {
        console.log(response.status);
      });


  }

  /*$scope.loadMore = function () {
		$http({
				method: "GET",
				url: "data.json"
			})
			.then(function loadMoreSuccess(response) {
		for (let i = counter; i < (counter + chunks); i++) {
			$scope.datas.push(response.data[i]);
		}
		counter += chunks;
	})
			.catch(function onError(response) {
		console.log(response.status);
	});
	};*/



  $scope.selected = {
    value: $scope.datas[0]
  };







});

#widgetContainer {
  width: 100%;
}

ul li {
  list-style: none;
  text-align: center;
}

ul {
  height: 120px;
  overflow-y: auto;
}

#loadMore {
  text-align: center;
  color: #aaa;
  background: #ddd;
  cursor: pointer;
}

#category {
  text-align: center;
  background: #ddd;
}

#listContainer {
  width: 20%;
}

span {
  cursor: pointer;
}

h4 {
  background: #ddd;
  color: #aaa;
}

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="script/lib/angular/angular.js"></script>
  <script src="https://code.angularjs.org/1.6.10/angular-sanitize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.css">
  <link rel="stylesheet" href="stylesheet/style.css">
</head>

<body ng-controller="myCtrl">
  <div class="container">
    <input type="text" ng-model="headers">
    <ui-select multiple spinner-enabled="true" close-on-select="false" ng-model="selected.value">
      <ui-select-no-choice>
        couldn't find anything...
      </ui-select-no-choice>
      <ui-select-match placeholder="Select country...">
        <span>{{$item.name}}</span>
      </ui-select-match>
      <ui-select-choices group-by="'category'" repeat="data in (datas | filter: $select.search) track by $index" refresh="getData($select.search)" refresh-delay="0">
        <span>{{data.name}}</span>
      </ui-select-choices>
    </ui-select>
  </div>

  <script src="script/script.js"></script>
</body>

</html>

Despite I guess this is a good question I really think you need to be more specific. — davidkonrad
– davidkonrad, Commented Jun 2, 2018 at 10:21
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Please copy the relavent code from the THIMBLE to the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example. — georgeawg
– georgeawg, Commented Jun 2, 2018 at 12:34

Canta · Accepted Answer · 2018-06-02 15:59:27Z

1

// Supose you have an object with desired change relations:

var relations = { firstName: "name", oldKey: "newKey" };

// Also, you have your dataArray:

var dataArray = [
  { firstName: "foo", oldKey: 1 },
  { firstName: "bar", oldKey: 2 }
];

// Here follows how you can switch keys:
        
Object.entries(relations).map(([oldKey, newKey]) => {
  dataArray.map(data => {
    data[newKey] = data[oldKey];
    delete data[oldKey];
  })
});

// Check out the result:
console.log(dataArray);

edited Jun 2, 2018 at 15:59

answered Jun 2, 2018 at 15:44

Canta

1,4802 gold badges13 silver badges26 bronze badges

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

4 Comments

mssoheil Over a year ago

works only if you want to change "oldKey" to "newKey" inside the code and if you don't know what is the "newKey" you can't do it inside the code like this. and event if I put input value inside a variable it's not working because this can work with variable "name" not the value

mssoheil Over a year ago

for example you can't do this: var api_item = "oldKey" ; data.name = data.api_item;

Canta Over a year ago

With few modifications you can populate relations object adding event listener for input change, can't you?

mssoheil Over a year ago

yes thanks. It worked but I can't use model for it and in order to work I use ng-click on a button that submit that input field (which has ng-model) 's value

supra28 · Accepted Answer · 2018-06-02 07:12:16Z

1

Loop over it and create a new key name then delete the old one like :

jsonData.forEach((data)=>{
      data.name = data.firstName;
      delete data.firstName;
})

answered Jun 2, 2018 at 7:12

supra28

1,64610 silver badges17 bronze badges

7 Comments

mssoheil Over a year ago

I added ng-change event to the input and ng-model="choices" and in the code above I changed "firstName" to "choices" but it didn't work.

supra28 Over a year ago

@soheilPs The code is doing what you asked in the question, its changing the key firstName to name. I don't understand what you are trying to do.

mssoheil Over a year ago

I want to firstName be anything that the user specify in the input field

mssoheil Over a year ago

because right now any api that I want to use should has name key and I iterate the name but if the api doesn't have name or for example the user want to iterate something else it won't work

supra28 Over a year ago

When you get the api response you can use the transformation I posted above to change the response and then use that instead. No?

|

Collectives™ on Stack Overflow

change data key name came from JSON dynamically AngularJS

2 Answers 2

4 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related